节流（Throttle）和防抖（Debounce）技术主要用于优化高频率事件处理，如滚动、窗口调整大小、输入等。这两种技术可以减少不必要的计算和DOM操作，提升应用的性能和用户体验。
节流
节流技术的核心思想是在指定的时间间隔内，只允许执行一次函数。这意味着即使触发事件的频率很高，实际执行的函数调用次数却被限制在了一定的范围内。节流对于控制那些不需要频繁响应的事件特别有用，比如滚动事件或者窗口调整大小事件。通过节流，我们可以减少不必要的计算和DOM操作，从而提高页面的响应速度和性能。
使用原因： 节流技术用于控制函数在一定时间内只执行一次，适用于那些在短时间内可能被高频触发的事件，如滚动事件、窗口调整大小等。这样可以避免过多的计算和渲染操作，提高页面的性能和流畅度。
举例演示：
javascript
function throttle(fn, delay) {
let valid = true;
return function() {
if (!valid) {
return;
}
valid = false;
setTimeout(() => {
fn();
valid = true;
}, delay);
};
}
// 使用节流控制浏览器滚动事件
function showTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop, 1000);
节流的实现原理
节流的实现通常依赖于时间戳或者定时器。在上述代码示例中，throttle 函数通过设置一个标志位 valid 来控制函数的执行。当事件被触发时，如果 valid 为 true，则执行函数并将 valid 设置为 false。然后通过 setTimeout 设置一个延迟，在这个延迟时间结束后，将 valid 重新设置为 true，允许下一次函数执行。这样，无论事件触发多么频繁，函数的执行频率都被限制在了 delay 指定的时间间隔内。
使用场景
- 滚动加载，加载更多或滚到底部监听。
- 搜索框，搜索联想功能。
- 浏览器窗口调整大小，控制resize事件的触发频率。
在这个例子中，showTop 函数会被节流控制，以1秒的时间间隔输出滚动条位置。
防抖技术
防抖技术则是确保在事件触发后的一段时间内，即使事件被频繁触发，函数也只会在事件停止触发后的延迟时间后执行一次。这种技术非常适合那些需要在用户完成操作后进行处理的场景，比如输入框的搜索建议功能。通过防抖，我们可以减少不必要的处理和请求，提高应用的响应性和性能。
使用原因： 防抖技术用于确保事件触发后一定延迟内不再触发，才执行函数。适用于如搜索框输入、窗口调整等，减少不必要的计算或请求。
举例演示：
javascript
function debounce(func, delay) {
let timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, arguments), delay);
};
}
// 使用防抖减少搜索框输入的请求次数
const searchInput = document.getElementById('search');
const handleSearch = debounce(function() {
console.log('Sending request for:', this.value);
}, 500);
searchInput.addEventListener('keyup', handleSearch);
在这个例子中，只有在用户停止输入500毫秒后，handleSearch 才会被执行，减少了不必要的请求。
防抖的实现原理
防抖的实现通常依赖于定时器。在上述代码示例中，debounce 函数通过设置一个 timeoutId 来控制函数的执行。每次事件被触发时，都会清除之前的定时器，并重新设置一个新的定时器。如果在设定的延迟时间内事件再次被触发，之前的定时器会被清除，并重新计算延迟时间。只有当事件停止触发，并且超过了设定的延迟时间后，函数才会被执行。
使用场景
- 搜索框搜索输入，只在用户最后一次输入完再发送请求。
- 手机号、邮箱验证输入检测。
- 窗口大小resize，只在窗口调整完成后计算窗口大小。
通过合理地使用节流和防抖技术，我们可以有效地减少不必要的计算和DOM操作，从而提升应用的性能和用户体验。
