JavaScript中什么是防抖与节流_它们适用于哪些场景-js教程-PHP中文网

防抖是将多次高频事件合并为最后一次执行，核心是每次触发清除前次定时器；节流是固定间隔最多执行一次，需区分“等待中”和“可执行”状态。

javascript中什么是防抖与节流_它们适用于哪些场景

防抖（debounce）是什么，怎么写一个可靠版本

防抖是指将多次高频触发的事件，合并为最后一次执行。典型场景是用户在搜索框中输入时，不希望每按一次键就发请求，而是等他停顿下来再查。

关键点在于：每次新触发都会清除前一次的定时器，只保留最后一次的延迟执行。

setTimeout 必须被 clearTimeout 清除，否则会累积多个未执行定时器
需要返回函数，方便绑定事件或手动调用
推荐支持立即执行模式（immediate = true），即首次触发立刻执行，后续触发仍按防抖逻辑处理

function debounce(func, wait, immediate = false) {
  let timeout;
  return function(...args) {
    const later = () => {
      timeout = null;
      if (!immediate) func(...args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func(...args);
  };
}

节流（throttle）和防抖的区别在哪

节流是固定时间间隔内最多执行一次，不管触发多频繁。适用于监听滚动、鼠标移动这类持续高频但只需“采样”的场景。

常见错误是把节流写成“每次触发都重设定时器”，结果变成变相防抖；正确做法应区分“正在等待”和“可立即执行”两种状态。

使用时间戳方式：记录上次执行时间，当前时间减去它大于等于 wait 才执行
使用定时器方式：设置一个标志位，触发时若无定时器则启动，执行完再清空
时间戳方式更简单，但首次触发立即执行；定时器方式可控制首次是否延后

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

哪些场景该选防抖，哪些必须用节流

选错策略会导致交互卡顿或数据丢失。核心判断依据是：你关心的是“最终状态”还是“过程变化频率”。

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载