js的防抖和节流详细介绍

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35616850/article/details/90610063
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秒执行一次函数(秒数自己控制)
节流是一秒内只执行一次函数(秒数自己控制)
根据需求自行选择使用

如有错误,请指正

展开阅读全文

没有更多推荐了,返回首页