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 等第三方的实现,功能更强大。好啦,今天就分享那么多。

扩展阅读

我要分享

曾小乱

作者: 曾小乱

喜欢写点有意思的东西

发表评论

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

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