为什么要讲这个话题呢?主要是因为最近很多问题都由这个特性帮我解决了,让我感叹这非常有用。
学习英语是理解编程的第一步。de-
在英语里表示 xx 的反义,比如 defrost(除霜),deactivate(使失活),decentralization(权力分散),那么 debounce 的意思就是防抖/防止弹跳。我们结合实际的例子感性的认识一下。
比如,我们在一个循环语句中,有个函数我只想执行一次。
for (let i = 0; i < 30; i++) {
console.log(i);
say(i,i);// 爱就一个字,我只想说一次。
}
那怎么做呢?我们先看 debounce 都实现。
function debounce(fn, timeout) {
let timeId;
return (...args) => {
clearTimeout(timeId);
timeId = setTimeout(() => {
fn.apply(null, args);
}, timeout);
};
}
实现起来很简单,借助 setTimeout 就能搞定。say 函数的实现就是这样的:
let say = debounce(function (a,b) {
console.log(a,b);
}, 0);
把上面的代码合并起来就是完整可以运行的代码。我们在实际项目中可以参考 lodash 等第三方的实现,功能更强大。好啦,今天就分享那么多。
再写一个 throttle 的简单实现吧
throttle 的关键在于,有了定时器的 id 则不去执行函数,等时间到了再去把定时器的 id 设置为空。
function throttle(fn, time) {
let timeId = null
return function (...args) {
if(timeId) return
timeId = setTimeout(() => {
fn.apply(null, args)
timeId = null
}, time, args)
}
}
function test(event) {
console.log(event, Date.now() / 1000 | 0)
}
let fn = throttle(test, 2000)
document.addEventListener('scroll', fn)