javascript防抖和节流

概念

• 防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
• 节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
• 节流（throttle）与 防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

一、示例：监听scroll事件获取滚动条高度

//防抖函数
function debounce(fn, delay){
    var timer = null;//存放定时器
    return function(e){
    	clearTimeout(timer);//清除上一个定时器
        //创建定时器任务，间隔内时间scroll事件连续触发，就不会执行fn函数
    	timer = setTimeout(()=>{
        	fn.apply(this, arguments)
        }, delay);
    }
}
function handle(){
    //输出滚动条的高度
    var top = document.body.scrollTop || document.documentElement.scrollTop
    console.log( '防抖', top );
}
window.addEventListener('scroll', debounce(handle, 200))

//节流函数
function throttle(fn, delay) {
    let isReady = true; //通过闭包判断标记是否可执行
    return function () {
        if (!isReady){ return }
        isReady = false;//执行函数时，设置为false，间隔时间内不会在触发
        setTimeout(() => { 
            fn.apply(this, arguments);
            isReady = true;//函数执行完成后，重新设置标记为可执行
        }, delay);
    };
}
function handle(){
    //输出滚动条的高度
    var top = document.body.scrollTop || document.documentElement.scrollTop
    console.log( '节流', top );
}
window.addEventListener('scroll', throttle(handle, 200));

二、总结

• 防抖函数：如果在间隔时间内，发生了多次触发，只有最后一次事件被执行
• 节流函数：每间隔时间触发执行，发生了多次触发，会连续间隔时间被执行