JS之防抖和节流

防抖（debounce）和节流（throttle）是前端开发中常用的性能优化手段，用以控制函数执行的频率，以减少计算资源的使用。

防抖：指触发事件后，在指定的时间内，若有新的触发，则重新计时。直到指定时间内没有新的触发为止，事件处理函数才会执行一次。

节流：指连续触发事件时，保证一定时间内只调用一次事件处理函数。

防抖示例代码：

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 myFunc = debounce(function() {
    console.log('Function called!');
}, 2000);
window.addEventListener('scroll', myFunc);

节流示例代码：

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 myFunc = throttle(function() {
    console.log('Function called!');
}, 2000);
window.addEventListener('scroll', myFunc);