防抖函数和节流函数 | 熬夜冠军的博客

防抖函数

防抖函数：延时一段时间执行某个事件，当在这段时间内又被触发时，则重新计时

使用场景：按钮防重复提交、输入搜索（连续触发，重新计时）

function debounce(fn, delay = 500) {
  // 缓存一个定时器对象
  let timer;

  // 使用闭包，使得timer存在内存中，可以保留数据，不然每执行一次都会创建一个新的timer，依旧会执行N次的fn
  return function (...args) {
    // 当触发时定时器对象存在，则清除重新计时
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.call(this, ...args); // 执行特定操作
    }, delay); //重新开始定时器
  };
}

在线 DEMO

在这个案例中你可以发现，不管你输入的有多么快，永远都是停顿后的半秒钟更新一次搜索结果

节流函数

节流函数：当持续触发事件的时候，一段时间内只做一件事

使用场景：DOM 拖拽、改变浏览器宽度重新渲染（持续触发，跳跃执行）

function throttle(fn, wait = 500) {
  // 缓存一个定时器对象
  let timer;

  // 使用闭包，使得timer存在内存中，可以保留数据，不然每执行一次都会创建一个新的timer，依旧会执行N次的fn
  return function (...args) {
    // 当前存在定时任务，不创建新的定时任务，等待已有定时任务执行
    if (timer) return;

    timer = setTimeout(() => {
      fn.call(this, args);
      timer = null; // 将定时器置空
    }, wait);
  };
}

防抖函数​

节流函数​

防抖函数

节流函数