debounce 的简单实现

为什么要讲这个话题呢?主要是因为最近很多问题都由这个特性帮我解决了,让我感叹这非常有用。

学习英语是理解编程的第一步。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)

扩展阅读

作者: 曾小乱

喜欢写点有意思的东西

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据