防抖函数是否有更高级的写法
相关代码
function debounce(fn) {
let timeout = null;
return function () {
if(!timeout) {
fn.apply(this,arguments);
timeout = setTimeout(() => {
// clearTimeout(timeout); // 清除定时器操作
timeout = null
}, 500);
}
}
}
function say(e) {
console.log('防抖了哦',e)
}
btn.addEventListener('click', debounce(say))
防抖有两种写法,一种是先执行函数,第二种是后执行函数。这里写的是前者。
思路
- 将我们我们需要的函数(既say函数)进行防抖化
- 在绑定监听事件中,防抖函数执行,返回一个闭包函数
- 每次点击执行该闭包函数
- 第一次点击,立即执行say函数,当在规定的时间内再次点击时,say函数不执行
- 等规定时间过后,点击方可执行
问题
- 通过在setTimeout函数里 执行timeout = null,而不执行清除函数的操作可以达到效果,但是这样做可行?
- 改函数返回一个闭包函数,是否会有内存泄漏以及在点击多次后对内存产生的一些影响
特此鸣谢前来围观的各路侠客
希望大佬们能多维度的评价这种写法的好与坏,以及可用性等。
因此方交流,而不忘于江湖[抱拳]
timer=null是在定时器回调里执行的,不需要再手动清理一遍。
这个实现不存在内存泄露