JavaScript中的防抖和节流

JavaScript中的防抖和节流

场景引入

监听浏览器界面滚动执行回调，一旦滚动，就会触发大量回调，导致性能大大下降，应该如何优化该功能？

概念说明

防抖：未达到指定时间，再次触发监听时间，则会重新开始计时。(类比电梯例子)
节流：在指定时间内，多次触发事件，回调只执行一次。(类比游戏中释放技能)

代码实例

• 防抖函数：1秒内再次滚动页面，则重新开始计时。

var count = 0;    // 触发次数
// 防抖
function debounce(fn, wait) {    
    var time = null;    
    return function() {        
        if(time !== null){
            clearTimeout(time);
        }   
        time = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(count++); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000)); 

• 节流函数：1秒内滚动页面多次，回调只执行一次。

var count = 0;
var throttle = function(fn, duration) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                fn.apply(context, args);                        
                timer = null;                    
            }, duration);                
        }            
    }        
}        
function handle() {            
    console.log(count++);        
}        
window.addEventListener('scroll', throttle(handle, 1000));

应用场景

监听页面滚动、元素拖拽、表单重复提交等等。

以上纯属个人理解，如有错误，欢迎指正~