手写JS debounce
时间: 2023-09-05 10:13:47 浏览: 98
javascript进阶版纯手写课件
Debounce 是一种在处理高频事件时提高性能的技术。它可以使得函数在连续触发时只执行一次,并且是在连续触发结束后一定时间内执行。
手写 debounce 的实现方式如下:
```javascript
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
```
其中,`func` 是需要进行 debounce 的函数,`delay` 是连续触发时的间隔时间。
在这个实现中,`debounce` 函数返回了一个新函数,这个函数会在连续触发时只执行一次,并且是在连续触发结束后一定时间内执行。在每次调用时,它会清除之前的定时器,然后重新设置一个新的定时器,在定时器时间内没有再次触发时,会执行传入的函数。
使用方式如下:
```javascript
function doSomething() {
console.log('Doing something...');
}
const debouncedFunc = debounce(doSomething, 1000);
debouncedFunc(); // 不会立即执行
debouncedFunc(); // 不会立即执行
debouncedFunc(); // 不会立即执行
// 1 秒后会执行一次 doSomething 函数
```
阅读全文