debounce

时间:2022-07-23
本文章向大家介绍debounce，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

创建一个防抖函数。接收一个回调函数fn及一个延迟时间ms作为参数。

会在自上次调用防抖函数起至少经过ms毫秒后调用fn。

每次调用防抖函数，都会清除已有计时器并重新注册计时器。该计时器会在ms毫秒后触发回调函数。

回调函数内部使用Function.prototype.apply为fn绑定this指向，并传递必要的参数。

如果省略传参ms，默认传参为0。

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(
      () => fn.apply(this, args),
      ms
    );
  };
};

// 每250ms打印一次window尺寸
window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
);

随机文章
本站知识点必读
最近更新