引言
在现代Web开发中，我们经常需要处理各种频繁触发的事件，如窗口调整、滚动、输入和鼠标移动等。如果不加控制，这些事件可能会导致性能问题，因为事件处理函数可能会以极高的频率被调用。 防抖(Debounce)和节流(Throttle)是两种常用的技术，用于控制函数执行的频率，优化性能并提供更好的用户体验。
核心概念解析
防抖 (Debounce) 防抖技术确保一个函数在最后一次调用后经过指定延迟时间才会执行。如果在延迟时间内再次调用，计时器会重置。 比喻：就像电梯门，只有当一段时间内没有人进入时，电梯门才会关闭。
节流 (Throttle) 节流技术确保一个函数在指定时间间隔内最多执行一次。无论事件触发多少次，都会按照固定频率执行。 比喻：就像射击游戏中的武器，无论你点击多快，它都会按照固定的射速发射子弹。
实现原理
防抖函数基本实现代码
function debounce(func, delay = 500) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; }
节流函数基本实现代码
// 时间戳版本 首次点击：立即执行 最后一次：不执行 使用场景：需要立即反馈（按钮点击、滚动触发） function throttle(func, delay = 500) { let lastTime = 0; return function (...args) { const now = new Date().getTime(); if (now - lastTime < delay) return; lastTime = now; func.apply(this, args); }; }
// 首次点击：不立即执行 最后一次：执行 使用场景：希望保证最后一次执行（输入框、窗口 resize） function throttleTimer(func, delay = 500) { let timer = null; return function (...args) { if (timer) return; timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); }; }
原文请看：blog.csdn.net/weixin_4665…
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：blog.csdn.net/weixin_4665… ————————————————
