【Ajax】防抖和节流

防抖和节流是优化Ajax请求性能的两种常用方法。

1. 防抖（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);

2. 节流（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事件），节流适合间隔一定时间执行一次的事件（如鼠标不断点击触发）。根据实际需求选择合适的方法优化事件处理函数。