防抖（Debounce）和节流（Throttle）是两种常用的技术手段，主要用于控制某个函数在一定时间内触发的次数，以减少触发频率，提高性能并避免资源浪费。
防抖（Debounce）的工作原理是，当事件持续触发时，只有在事件停止触发n秒后，才会执行事件函数。如果在n秒内事件被重新触发，那么之前的计时会被重置。这种技术通常用于如模糊搜索、短信验证和文本编辑器实时保存等场景。
节流（Throttle）的工作原理是，当事件持续触发时，每n秒只执行一次函数。如果在n秒内事件被重复触发，那么只有第一次触发的事件会生效。这种技术常用于处理如scroll事件、浏览器播放事件和window的resize等场景。
防抖（Debounce）是指在一定时间内，当函数被频繁触发时，只有在最后一次触发后的延迟时间内，函数才会被真正执行。如果在延迟时间内又有触发事件发生，会重新开始计时。防抖技术常用于搜索框输入、按钮点击等场景，避免短时间内的频繁请求。
以下是一个简单的防抖示例代码：
// 创建一个防抖函数function debounce(func, delay) {let debounceTimer;return function () {// 清除之前设置的定时器clearTimeout(debounceTimer);// 设置一个新的定时器，延迟 delay 毫秒后执行 func 函数debounceTimer = setTimeout(() => {func.apply(this, arguments);}, delay);}}// 使用防抖函数const searchInput = document.getElementById('searchInput');const debouncedSearch = debounce(() => {console.log('执行搜索操作');}, 500);searchInput.addEventListener('keyup', debouncedSearch);
在上述示例中，创建了一个名为 debounce 的函数，它接受一个要执行的函数 func 和延迟时间 delay。在调用 debouncedSearch 函数时，会清除之前设置的定时器，并重新设置一个定时器，在延迟时间后执行 func 函数。
节流（Throttle）是指在一定时间内，无论函数被触发多少次，函数只会在固定的时间间隔内执行一次。如果在时间间隔内有多次触发事件，只会执行最后一次。节流技术常用于滚动事件、鼠标移动等场景，限制函数的执行频率。
以下是一个简单的节流示例代码：
// 创建一个节流函数function throttle(func, delay) {let canRun = true;return function () {if (canRun) {func.apply(this, arguments);canRun = false;setTimeout(() => {canRun = true;}, delay);}}}// 使用节流函数const scrollEventHandler = throttle(() => {console.log('滚动事件触发');}, 1000);window.addEventListener('scroll', scrollEventHandler);
在上述示例中，创建了一个名为 throttle 的函数，它同样接受一个要执行的函数 func 和延迟时间 delay。在调用 throttle 函数时，如果 canRun 为 true，则执行 func 函数，并将 canRun 设置为 false。然后，通过设置一个定时器，在延迟时间后将 canRun 设置为 true，以便下一次函数调用。
防抖和节流的主要区别在于：防抖是在最后一次触发后的延迟时间内执行函数，而节流是在固定的时间间隔内执行函数。
选择使用防抖还是节流，取决于具体的业务需求和场景。防抖更适合处理连续的快速触发事件，而节流更适合限制频繁触发事件的执行频率。
希望这个解释对你有所帮助！如果你还有其他问题，请随时提问。
欢迎加入“前端组件开发学习”交流群，一起学习成长！可关注 “前端组件开发” 公众号后，私信后申请入群。
