深入浅出防抖与节流：原理、实现与场景解析

鎏旧

已于 2025-02-26 16:49:00 修改

阅读量576

点赞数 8

分类专栏：原理实践文章标签： javascript 前端

于 2025-02-25 11:51:54 首次发布

本文链接：https://blog.youkuaiyun.com/zyl20031021/article/details/145848926

版权

原理实践专栏收录该内容

10 篇文章

订阅专栏

一、引言

在前端开发中，高频触发的事件（如滚动、输入、拖拽等）容易引发性能问题。本文将通过原理剖析、代码实现和场景分析，深入讲解**防抖（Debounce）与节流（Throttle）**两大核心性能优化方案。

二、防抖（Debounce）机制

1. 核心原理

将高频触发的多次事件合并为一次执行，在事件停止触发后的指定时间间隔，才会真正执行回调函数。若在等待期间再次触发事件，则重新开始计时。

防抖示意图

2. 代码实现

const debounce = (func, wait = 50) => {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, wait);
  };
};

实现要点：

闭包保存定时器ID，控制执行时机
每次触发重置定时器，保证连续触发时仅最后一次有效

3. 经典场景

搜索框联想词：连续输入停止500ms后发起请求
表单提交按钮：防止重复点击造成多次提交
窗口Resize事件：调整结束后计算布局

三、节流（Throttle）机制

1. 核心原理

按固定频率执行事件处理，无论事件触发多么频繁，回调函数都会在指定时间间隔内最多执行一次。

节流示意图

2. 代码实现

方案A：时间戳版（前缘触发）

const throttle = (func, wait = 50) => {
  let lastTime = 0;
  return function(...args) {
    const now = +new Date();
    if (now - lastTime > wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
};

特点：首次立即执行，停止触发后不再执行

方案B：定时器版（后缘触发）

const throttleTimer = (func, delay) => {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
};

特点：首次延迟执行，停止触发后会再执行一次

3. 经典场景

页面滚动加载：每200ms检查一次滚动位置
元素拖拽定位：高频mousemove事件保持流畅
射击游戏射速控制：限制1秒内只能发射1发子弹

四、防抖与节流对比分析

维度	防抖（Debounce）	节流（Throttle）
执行时机	停止触发后执行	按固定间隔执行
执行次数	多次合并为1次	稀释为固定频率
适用场景	结果导向型操作	过程持续性操作
类比案例	电梯等人（最后一人进）	地铁发车（按时发车）