使用JavaScript写一个防抖代码
时间: 2023-03-11 20:42:23 浏览: 98
前端的js防抖代码示例
在 JavaScript 中实现防抖的方法如下:
```
function debounce(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
```
使用方法:
```
const debouncedFunc = debounce(function() {
console.log('Debounced function');
}, 1000);
// 触发 debouncedFunc
debouncedFunc();
// 在1s内触发多次 debouncedFunc,只会在1s之后输出一次
debouncedFunc();
debouncedFunc();
debouncedFunc();
```
防抖函数 debounce 接受两个参数:要进行防抖的函数 fn 和延迟的时间 delay。它返回一个新的函数,这个函数接受的参数和返回值和原函数 fn 一致。在返回的函数中,通过使用 setTimeout 和 clearTimeout 来控制函数的触发。如果在 delay 时间内多次调用返回的函数,那么 clearTimeout 将会清除之前的 setTimeout,并重新设置一个新的 setTimeout。这样就可以保证,在 delay 时间内多次调用返回的函数,只会在 delay 时间过后才会真正执行一次 fn 函数。
阅读全文