防抖和节流是优化Ajax请求性能的两种常用方法。
- 防抖（Debounce）：指触发事件后，在指定的时间间隔内，若再次触发事件，则重新计算时间。直到停止触发事件，事件处理函数才会执行一次，此时如果已经过了设定的时间间隔，则立即执行。防抖主要用于用户的连续操作，只处理最后一次。
function debounce(fn, wait) {
var timeout = null;
return function() {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
};
}
var myEfficientFn = debounce(function() {
// 执行Ajax请求
console.log('Ajax请求被触发');
}, 250);
window.addEventListener('resize', myEfficientFn);- 节流（Throttle）：指连续触发事件时，保证一定时间内只调用一次事件处理函数。节流可以使得请求合并，减少请求次数。
function throttle(fn, wait) {
var previous = 0;
return function() {
var context = this;
var args = arguments;
var now = new Date();
if (now - previous > wait) {
fn.apply(context, args);
previous = now;
}
};
}
var myEfficientFn = throttle(function() {
// 执行Ajax请求
console.log('Ajax请求被触发');
}, 250);
window.addEventListener('resize', myEfficientFn);防抖和节流的应用场景不同，防抖适合快速连续触发的事件（如window的resize、scroll事件），节流适合间隔一定时间执行一次的事件（如鼠标不断点击触发）。根据实际需求选择合适的方法优化事件处理函数。