函数防抖（Debounce）
定义：
函数防抖的基本思想是在事件被触发后，等待一段时间，如果这段时间内事件再次被触发，则重新计时。在等待时间结束后，只有最后一次事件触发会执行对应的回调函数。
实现：
function debounce(func, delay) {
return function (args) {
let that = this;
let _args = args;
clearTimeout(func.id);
func.id = setTimeout(() => {
func.call(that, _args);
}, delay);
};
}
说明：
debounce函数接受两个参数：需要执行的函数func和延迟时间delay。- 在防抖机制中，如果在
delay时间内触发了新的事件，计时器会重新开始，只有当一定时间内没有再次触发事件时，才会执行回调。
函数节流（Throttle）
定义：
函数节流的核心思想是限制一个函数在特定时间内只能执行一次。即使事件在该时间段内多次触发，也只会执行一次函数。这样可以有效控制高频率事件的调用次数。
实现：
function throttle(func, delay) {
let last, deferTimer;
return function (args) {
let that = this;
let _args = arguments;
let now = +new Date();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
func.apply(that, _args);
}, delay);
} else {
last = now;
func.apply(that, _args);
}
};
}
说明：
throttle函数同样接受两个参数：需要执行的函数func和延迟时间delay。- 当函数被调用时，如果距离上次调用的时间未超过
delay，则本次调用会被忽略。如果超过了，函数会立即执行。
使用示例
以下代码展示了如何使用防抖函数 debounce 来防止频繁的输入触发 ajax 请求。
function ajax(content) {
console.log('ajax: ' + content);
}
let inputContent = document.getElementById('inputCon');
let debounceAjax = debounce(ajax, 500);
inputContent.addEventListener('keyup', function (e) {
debounceAjax(e.target.value);
});
总结：
- 函数防抖（debounce） 适用于当事件频繁触发且我们只关心最后一次触发的情况，例如用户输入框联想搜索。
- 函数节流（throttle） 适用于在单位时间内只执行一次事件响应的场景，如滚动事件的滚动检测或按钮防连点。
综合使用场景
函数防抖应用场景：
- 搜索框自动补全：当用户输入搜索关键词时，只在用户停止输入一定时间后再发送请求，减少不必要的网络请求。
- 窗口大小调整事件（resize）：防止用户在调整窗口时，触发过多的无用事件。
函数节流应用场景：
- 滚动加载：在用户滚动页面时，节流可以确保检查是否到底部触发加载更多内容时的函数不会被频繁调用。
- 鼠标点击事件：防止按钮被用户多次快速点击，确保按钮点击事件在一定时间内只能触发一次。
通过合理运用防抖与节流，可以有效提高页面性能，减少不必要的函数调用，从而提升用户体验。
