34 lines
1.1 KiB
Markdown
34 lines
1.1 KiB
Markdown
---
|
|
title: Debounce function
|
|
tags: function
|
|
cover: solitude-beach
|
|
firstSeen: 2018-01-28T15:18:26+02:00
|
|
lastUpdated: 2021-10-13T19:29:39+02:00
|
|
---
|
|
|
|
Creates a debounced function that delays invoking the provided function until at least `ms` milliseconds have elapsed since its last invocation.
|
|
|
|
- Each time the debounced function is invoked, clear the current pending timeout with `clearTimeout()`. Use `setTimeout()` to create a new timeout that delays invoking the function until at least `ms` milliseconds have elapsed.
|
|
- Use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments.
|
|
- Omit the second argument, `ms`, to set the timeout at a default of `0` ms.
|
|
|
|
```js
|
|
const debounce = (fn, ms = 0) => {
|
|
let timeoutId;
|
|
return function(...args) {
|
|
clearTimeout(timeoutId);
|
|
timeoutId = setTimeout(() => fn.apply(this, args), ms);
|
|
};
|
|
};
|
|
```
|
|
|
|
```js
|
|
window.addEventListener(
|
|
'resize',
|
|
debounce(() => {
|
|
console.log(window.innerWidth);
|
|
console.log(window.innerHeight);
|
|
}, 250)
|
|
); // Will log the window dimensions at most every 250ms
|
|
```
|