防抖是最后一次触发后延迟执行，节流是固定间隔内最多执行一次；防抖适用于搜索输入等需等待操作结束的场景，节流适用于滚动监听等需稳定采样节奏的场景。
防抖和节流是前端处理高频事件（比如 resize、scroll、input）的两个核心优化手段，目的都是减少函数实际执行次数，但逻辑不同：防抖是“等你停了再执行”，节流是“固定频率执行”。
防抖（Debounce）：最后一次触发后延迟执行
适用于搜索框输入联想、窗口大小调整后重新布局等场景——用户连续操作时，只响应最后那次。
关键点：每次触发都清除之前的定时器，重新设置新定时器。
用 setTimeout + clearTimeout 实现 支持立即执行模式（首次触发立刻运行，后续触发按规则等待） 注意 this 和参数的正确传递
基础实现：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait, immediate = false) { let timeout; return function(...args) { const later = () => { timeout = null; if (!immediate) func.apply(this, args); }; const callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(this, args); };}
节流（Throttle）：固定间隔内最多执行一次
适合滚动监听、鼠标拖拽等需要持续反馈但不必每帧都处理的场景——像“每隔 100ms 最多执行一次”。
关键点：区分“定时器控制”和“时间戳控制”两种主流写法，前者更常用且易于理解。
定时器版：用 setTimeout 控制是否处于“冷却中” 时间戳版：记录上一次执行时间，当前时间减去它大于等待时间才执行 两者在首次/末次触发行为上略有差异，可根据需求选择
定时器版节流示例：
function throttle(func, wait) { let timeout = null; return function(...args) { if (!timeout) { timeout = setTimeout(() => { func.apply(this, args); timeout = null; }, wait); } };}
实际使用中的细节提醒
防抖和节流函数返回的是新函数，需在事件绑定时调用并赋值，而不是直接传入函数名。
错误写法：input.addEventListener('input', debounce(handleInput, 300)) —— 每次都会新建闭包，失去防抖意义 正确写法：const debounced = debounce(handleInput, 300); input.addEventListener('input', debounced) 记得在组件卸载或销毁时清除定时器（尤其 React useEffect 中），避免内存泄漏 现代项目可借助 Lodash 的 _.debounce / _.throttle，它们已处理好 this、取消、返回清理函数等细节
如何选？看业务意图
用户输入搜索关键词 → 防抖（等他打完再查）
监听页面滚动位置做吸顶效果 → 节流（不需要每像素都算，16ms 一帧足够）
表单实时校验 → 防抖（避免用户还没输完就报错）
游戏手柄方向监听 → 节流（保持稳定采样节奏）
基本上就这些。不复杂但容易忽略上下文和清理逻辑。
以上就是Javascript如何实现防抖与节流？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542486.html
微信扫一扫 
支付宝扫一扫 
