JS 节流，防抖

节流（Throttling）和防抖（Debouncing）是两种常用的优化函数执行频率的技术。

节流（Throttling）: 控制一定时间内函数的执行次数。

function throttle(fn, wait) {
let timeout = null;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
fn.apply(context, args);
timeout = null;
}, wait);
}
};
}

// 使用示例
window.addEventListener(‘resize’, throttle(function() {
console.log(window.innerWidth, window.innerHeight);
}, 200));

防抖（Debouncing）: 当持续触发事件时，一定时间内只执行最后一次。

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);
};
}

// 使用示例
window.addEventListener(‘resize’, debounce(function() {
console.log(window.innerWidth, window.innerHeight);
}, 200));

节流通过设置一个timeout控制函数执行的频率，防抖通过清除已经设置的timeout再次执行函数。