微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

函数节流：防抖与节流实现方案

夢幻星辰
发布： 2025-11-20 20:23:34
原创
491人浏览过
函数防抖与节流均可优化高频事件性能；防抖通过延迟执行并重置定时器，确保连续触发时只执行最后一次或首次；节流则通过时间戳或定时器控制函数固定频率执行，保证周期性响应；两者分别适用于搜索输入、按钮点击与滚动监听、窗口缩放等场景。

函数节流：防抖与节流实现方案

在处理高频触发事件时，比如窗口滚动、调整大小或输入框输入，直接执行回调会导致性能问题。函数节流和防抖是两种常用的优化手段，控制函数执行频率，提升页面响应速度与用户体验。

函数防抖（Debounce）

防抖的思路是：当事件被触发后，延迟一段时间执行回调，如果在这段时间内再次触发该事件，则重新计时。

适用于搜索建议、按钮重复点击等场景，只关心“最后一次操作”。

实现方式：
  • 使用 setTimeout 缓存定时器
  • 每次触发时清除旧定时器，重新设置
  • 延迟结束后执行目标函数

基础防抖实现：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

若需立即执行首次调用（leading edge），可加入 immediate 参数控制：

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

函数节流（Throttle）

节流的逻辑是：规定一个单位时间，在这个时间内最多只执行一次函数。无论触发多少次，都按固定节奏执行。

适合用于 scroll、resize、mousemove 等持续触发但只需周期性响应的场景。

Text Mark
Text Mark

处理文本内容的AI助手

Text Mark 81
查看详情 Text Mark
实现方式：
  • 记录上一次函数执行的时间戳
  • 每次触发时判断当前时间是否超过设定间隔
  • 满足条件则执行并更新时间戳

基于时间戳的节流实现：

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

也可以使用定时器方式实现，更灵活地控制首尾执行时机：

function throttle(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

防抖与节流的核心区别

理解两者差异有助于正确选择使用场景：

  • 防抖：频繁触发下只执行最后一次（或第一次），中间的都被取消
  • 节流：保证在指定时间间隔内至少执行一次，形成稳定频率

举个例子：用户连续快速滚动页面

  • 用防抖，可能在整个滚动结束才执行一次处理
  • 用节流，每100ms执行一次，能及时响应又不至于太频繁

基本上就这些，根据业务需求选择合适方案即可。

以上就是函数节流：防抖与节流实现方案的详细内容，更多请关注php中文网其它相关文章！

相关标签：
app edge ai 区别 edge NULL if date const function 事件 this

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript编译器_Babel插件编写指南 下一篇：js数组排序方法sort
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js脚本怎么实现页面元素渐隐渐现_js渐隐渐现过渡效果脚本编写教程 答案：通过CSStransition与JavaScript控制opacity实现渐隐渐现。1.使用CSS定义过渡，JS切换类名触发效果；2.用setInterval手动逐帧调整opacity值完成淡入淡出；3.封装toggleFade函数实现显示状态切换；4.推荐优先使用CSStransition以提升性能，注意初始样式设置与定时器清理，结合visibility或display控制元素占位，确保流畅动画体验。
2025-11-20 20:35:02
288
理解JavaScript中的事件冒泡、捕获与委托_javascript事件 事件冒泡是从目标元素向上逐级触发父元素事件，事件捕获是从外向内传递并在捕获阶段触发，事件委托利用冒泡机制在父元素上处理子元素事件以提升性能。
2025-11-20 20:34:02
271
JavaScript命令模式_撤销重做功能设计 命令模式通过封装操作为对象实现撤销与重做功能，核心角色包括Command、ConcreteCommand、Receiver和Invoker；以文本编辑器为例，InsertCommand和DeleteCommand分别记录插入与删除操作的位置及内容，确保可逆；CommandManager维护undoStack和redoStack栈，执行新命令时压入undo栈并清空redo栈，调用undo时将命令从undo栈弹出并压入redo栈，redo则相反；TextEditor作为接收者提供insert、del
2025-11-20 20:33:52
903
JavaScript密码学_Web Crypto API应用实践 WebCryptoAPI可在浏览器中实现安全加密操作，支持密钥管理、AES-GCM加解密、HMAC、ECDSA签名及SHA-256哈希，适用于数据保护与身份认证，需结合HTTPS、安全存储与后端协作以构建完整安全体系。
2025-11-20 20:32:02
370
JavaScript服务端开发_Node.js事件驱动架构解析 Node.js凭借事件驱动架构和非阻塞I/O实现高并发处理，其核心是事件循环机制。1.事件循环通过单线程模型管理异步操作，分定时器、轮询、检查等阶段有序执行回调；2.非阻塞I/O将任务交由系统底层处理，完成时通过事件通知主线程，避免线程阻塞；3.EventEmitter类提供事件订阅与触发能力，支撑HTTP服务器、流等API的松耦合设计；4.该架构适用于I/O密集型场景如聊天服务，具备低内存占用、少上下文切换的优势；5.CPU密集任务可借助Cluster模块分散负载。掌握这三大机制即掌握Node
2025-11-20 20:30:01
512
JavaScript_设计系统与组件库构建 设计系统的核心在于统一设计与开发，包含设计令牌、UI组件库、设计指南和工具链，通过合理抽象、主题定制、无障碍支持和Tree-shakable架构提升协作效率与维护性，结合Storybook文档、Figma协作及CI/CD流程实现持续迭代，最终成为产品加速器。
2025-11-20 20:29:32
648
浏览器存储JavaScript_IndexedDB高级应用 IndexedDB作为现代Web应用的核心存储技术，支持结构化数据、事务处理和异步操作，适用于离线优先架构。它通过本地缓存实现快速启动与响应，结合版本号或时间戳进行数据同步与冲突检测。合理创建索引可提升查询效率，游标配合IDBKeyRange实现分页与范围检索。所有操作需在事务中执行，正确管理读写模式与生命周期以确保数据一致性。集成至前端框架时，应封装PromiseAPI并联动状态管理库，避免直接在渲染中调用异步操作。掌握这些实践可构建高性能、离线可用的PWA应用。
2025-11-20 20:29:02
382
JS窗口控制怎么实现_JS窗口大小位置与跳转控制方法详解 通过JavaScript可控制窗口大小、位置及页面跳转。1.使用window.open()打开新窗口并设置尺寸与位置，需用户触发避免被拦截；2.用resizeTo()和moveTo()调整当前窗口大小和位置，受限于浏览器安全策略；3.通过location.href、replace()或reload()实现跳转与刷新，replace()不保留原页面记录；4.监听resize、beforeunload等事件响应窗口变化，提升用户体验。
2025-11-20 20:27:43
188
js数组排序方法sort JavaScript数组排序依靠sort()方法，默认按Unicode顺序排序，会改变原数组；数字排序需传入比较函数(a,b)=>a-b实现升序或b-a降序；对象数组可按属性排序，如按年龄a.age-b.age，字符串推荐localeCompare()方法；注意用[...arr].sort()保留原数组，避免直接修改。
2025-11-20 20:24:05
965
函数节流：防抖与节流实现方案 函数防抖与节流均可优化高频事件性能；防抖通过延迟执行并重置定时器，确保连续触发时只执行最后一次或首次；节流则通过时间戳或定时器控制函数固定频率执行，保证周期性响应；两者分别适用于搜索输入、按钮点击与滚动监听、窗口缩放等场景。
2025-11-20 20:23:34
490
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部