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)

扩展阅读

• JavaScript Debounce Function

我要分享