实现js防抖

2021-03-12  本文已影响0人  pumpkin1024

防抖(debounce)

第一步

  1. 实现一个函数,返回一个函数func
  2. 参数,第一个参数是一个函数,第二个参数是一个数字time
  3. 当频繁调用返回的函数func时,在time毫秒时间内不执行,当最后一次调用后,过time毫秒后执行一次函数
function debounce(func, timeout) {
  let timer;
  return function () {
    if (timer) {
      // 如果在timeout秒调用 清空定时器
      clearTimeout(timer);
    }
    // 每次调用都指定timeout后再执行
    timer = setTimeout(() => {
      timer = null;
      func();
    }, timeout);
  };
}

第二步

  1. 函数可以传参数
  2. 在func调用时要使用function ()的上下文this
function debounce(func, timeout) {
  let timer;
  return function () {
    if (timer) {
      // 如果在timeout秒调用 清空定时器
      clearTimeout(timer);
    }
    // 每次调用都指定timeout后再执行
    timer = setTimeout(() => {
      timer = null;
      func.apply(this, Array.from(arguments));
    }, timeout);
  };
}
上一篇下一篇

猜你喜欢

热点阅读