总结

• 防抖： 事件连续触发时，只执行最后一次操作。
• 节流： 事件连续触发时，保证一段时间内只执行一次操作。

一、防抖（Debounce）

1、简介

在函数需要连续触发时，只执行最后一次操作。即 倒计时结束之前，不要打断我

2、设计思路

当事件触发后，首先检查定时器是否存在，并重新设置一个新的定时器。当设置的时间间隔内没有再次触发事件，定时器不会发生重置，函数就会执行。

3、场景

防抖主要用在用户频繁操作的场景:

• 比如搜索框输入，只有用户停止输入一段时间后才开始搜索

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位

• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

4、案例

// 防抖函数
function debounce(fn, wait) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, wait);
  };
}
// 使用
window.onresize = debounce(function () {
  console.log("resize");
}, 500);

二、节流（Throttle）

1、简介

不要触发我。在函数需要连续触发时，限制一段时间内只执行一次操作。

2、设计思路

当事件触发后，先执行一次函数，并设置一个定时器，在定时器倒计时结束之前，都不再执行函数。只有当定时器到期后，才会重新执行函数。

3、场景

节流主要用在需要限制函数调用频率的场景，

• 鼠标连续不断地触发某事件（如点击，发短信，发送验证邮件等），单位时间内只触发一次；
• 监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断。例如：懒加载；
• 浏览器播放事件，每个一秒计算一次进度信息等；

4、案例

// 方式1: 使用时间戳
function throttle1(fn, wait) {
  let time = 0;
  return function () {
    let _this = this;
    let args = arguments;
    let now = Date.now();
    if (now - time > wait) {
      fn.apply(_this, args);
      time = now;
    }
  };
}

// 方式2: 使用定时器
function thorttle2(fn, wait) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;

    if (!timer) {
      timer = setTimeout(function () {
        timer = null;
        fn.apply(_this, args);
      }, wait);
    }
  };
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24