节流是每隔一段时间执行一次，防抖是等事件停止触发一段时间后才执行。节流通过记录上次执行时间控制频率，适用于滚动监听等场景；防抖通过清除并重启定时器将多次触发合并为一次，适用于搜索输入等需等待操作结束的场景。两者均用于优化高频事件处理，提升性能与用户体验。
事件节流（Throttling）和防抖（Debouncing）是JavaScript中优化高频事件执行的常用技术，比如窗口滚动、调整大小、输入框输入等场景。它们都能控制函数执行频率，但机制不同。
什么是事件节流（Throttling）
节流的目的是在指定时间间隔内，最多只执行一次函数。即使事件被频繁触发，回调函数也会按固定频率执行。
实现思路：记录上次执行时间，每次触发时判断当前时间与上次执行时间的差值，超过设定间隔才允许执行，并更新执行时间。
示例代码：
function throttle(fn, delay) { let lastExecTime = 0; return function (...args) { const now = Date.now(); if (now - lastExecTime > delay) { fn.apply(this, args); lastExecTime = now; } }; }// 使用示例window.addEventListener('scroll', throttle(() => {console.log('节流：滚动事件触发');}, 1000));
什么是防抖（Debouncing）
防抖的目的是将多次触发合并为最后一次执行。只要事件持续触发，函数就不会执行，只有当事件停止触发一段时间后才执行一次。
立即学习“Java免费学习笔记（深入）”；
常见于搜索框输入、窗口调整等需要“等待用户操作结束”的场景。
示例代码：
function debounce(fn, delay) { let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }// 使用示例document.getElementById('searchInput').addEventListener('input', debounce((e) => {console.log('防抖：执行搜索', e.target.value);}, 300));
节流与防抖的区别
节流：保证在一定时间内至少执行一次，适合需要定期响应的场景，如滚动监听上报行为。防抖：只在静止期后执行一次，适合等待用户操作完成再处理，如输入后搜索。
简单记：节流是“每隔一段时间执行”，防抖是“等你不点了再执行”。
基本上就这些。根据实际需求选择合适的方式，能显著提升性能和用户体验。
以上就是JavaScript中的事件节流（Throttling）与防抖（Debouncing）如何实现？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525748.html
微信扫一扫 
支付宝扫一扫 
