防抖和节流

防抖

定义

对于短时间内连续触发的事件，在某个时间期限内多次触发时会清除之前的定时器，即只记最后一次。

代码实现

/*
 * fn [function] 需要防抖的函数
 * delay [number] 毫秒，防抖期限值
 */
function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay);
  };
}
const callback = function() {}; // 自定义回调函数
const debouncedCallback = debounce(callback, 500);

应用场景

• 搜索联想：用户输入内容时会进行搜索，如果继续输入内容，则停止上一次的搜索使用最新的内容重新搜索
• 监听 window 的 resize 事件：若窗口被持续拖动，则应等到最后一次拖放结束后执行回调，避免多次计算窗口大小

节流

定义

如果短时间内多次触发了同一事件，那么在函数执行一次后，在一个限期内不再执行，即只记第一次。类似于游戏中技能的冷却时间。

代码实现

function throttle(fn, delay) {
  let valid = true;
  return function() {
    if (valid) {
      fn();
      valid = false;
      seTimeout(() => {
        valid = true;
      }, delay);
    }
  };
}

应用场景

• 滚动条响应事件
• 鼠标点击事件