js的防抖和节流详细介绍

js的防抖和节流主要用在监听输入框、监听页面滚动等一些高频触发事件，让这些事件既能保持高频触发，但又不浪费性能。

首先介绍防抖（debounce）定义一个防抖函数，可直接复制使用，注意使用方法。

var debounce=function(fn, wait){
	var timer = null;
    return function(){
        if(timer!== null)   clearTimeout(timeout);        
        timer= setTimeout(fn, wait);    
    }
};
function yourfunc(){
	console.log(Math.random())
};
window.addEventListener('scroll',debounce(yourfunc,1000));

上面相当于在监听页面滚动的时候，每隔1秒执行一次你的函数

然后是节流（throttle ）定义一个节流函数，可直接复制使用，注意使用方法。

var throttle = function(func, delay) {            
　　var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);          
        }            
    }      
}  
function yourfunc() {
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(yourfunc, 1000));

上面相当于在监听页面滚动的时候，1秒内只执行一次你的函数

两种方式区别在于：

防抖是每1秒执行一次函数（秒数自己控制）

节流是一秒内只执行一次函数（秒数自己控制）

根据需求自行选择使用

如有错误，请指正