防抖和节流是优化函数执行频率的两种技巧，用以改善用户体验。
- 防抖（Debounce）: 指触发事件后，在指定的时间内，若再次触发事件，则重新计时。直到指定时间内没有再次触发事件时，事件处理函数才会执行一次。
function debounce(fn, wait) {
let timeout = null;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
};
}
// 使用
let myEfficientFn = debounce(function() {
// 实际处理函数内容
console.log('Debounced!');
}, 250);
window.addEventListener('resize', myEfficientFn);- 节流（Throttle）: 指连续触发事件时，保证一定时间段内只执行一次事件处理函数。
function throttle(fn, wait) {
let previous = 0;
return function() {
let context = this;
let args = arguments;
let now = new Date();
if (now - previous > wait) {
fn.apply(context, args);
previous = now;
}
};
}
// 使用
let myEfficientFn = throttle(function() {
// 实际处理函数内容
console.log('Throttled!');
}, 250);
window.addEventListener('resize', myEfficientFn);防抖和节流可以用于输入框的输入事件（如 keyup、mousemove），窗口的大小调整事件（resize），以及任何需要优化性能的事件处理中。