节流与防抖

Ai 摘要：本文介绍了前端开发中两种优化高频事件的技术：防抖和节流。防抖确保连续触发事件时只执行最后一次（如搜索框提示），通过清除并重置定时器实现；节流则限制事件在固定时间内只执行一次（如滚动事件），通过定时器状态判断是否执行。文章提供了两者的代码实现及封装函数，并列举了典型应用场景。

一，防抖（只执行最后一次）

防抖就是指连续触发事件但是在设定的一段时间内中只执行最后一次。

例如：设定1000毫秒执行，当触发事件了，会1000毫秒后执行。假设500毫秒的时候又触发了事件，那就会重新开始1000毫秒之后再执行。

具体应用：搜索框搜索提示，文本编辑器自动保存。

代码：每次调用函数时，清除以前的定时器，设置新的定时器。

let timer = null;
document.querySelector(".ipt").onkeyup = function () {
  if (timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log("执行了");
  }, 1000);
};
// 防抖函数封装
function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer !== null) clearTimeout(timer);
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

二，节流（只执行一次）

节流是指连续触发事件但是在设定的一段时间内只执行一次函数。

例如：设定1000毫秒执行，那么在1000毫秒内触发再多次，也只会在1000毫秒后执行一次。

具体应用：高频事件，如快速点击、鼠标滚动、resize事件、scroll事件。下拉加载。视频播放记录时间等。

代码：

let timer = null;
document.querySelector(".ipt").onmouseover = function () {
  if (timer !== null) return;
  timer = setTimeout(() => {
    console.log("执行了");
    timer = null;
  }, 1000);
};

// 节流函数封装
function throttle(fn, delay) {
  let timer = null;
  return function () {
    if (timer !== null) return;
    timer = setTimeout(() => {
      fn();
      timer = null;
    }, delay);
  };
}