什么是防抖和节流？有什么区别? 如何实现？

防抖（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，以便下一次函数调用。

防抖和节流的主要区别在于：防抖是在最后一次触发后的延迟时间内执行函数，而节流是在固定的时间间隔内执行函数。

选择使用防抖还是节流，取决于具体的业务需求和场景。防抖更适合处理连续的快速触发事件，而节流更适合限制频繁触发事件的执行频率。

希望这个解释对你有所帮助！如果你还有其他问题，请随时提问。