手写防抖和节流

记录手写防抖和节流

防抖(debounce)

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次;
如果设定的时间到来之前,又一次触发了事件,就重新开始延时;

const debounce = (fn, t) => {
  let time;
  return function (...arg) {
    clearTimeout(time);
    let that = this;
    time = setTimeout(function (...arg) {
      fn.apply(that, arg);
    }, t);
  };
};

节流(throttle)

当持续触发事件时,保证一定时间段内只调用一次事件处理函数;

const throttle = (fn, t) => {
  let now = Date.now();
  return function (...arg) {
    if (Date.now() - now > t) {
      fn.apply(this, arg);
      now = Date.now();
    }
  };
};

CC BY-NC-SA 4.0 2018–PRESENT © Wuxh

cd .. md