防抖和节流:即 限制函数的执行次数
防抖和节流二者非常相似,但还是有细微的不同:
-
防抖:通过 setTimeout 的方式在一定的时间间隔内,将多次触发变成一次触发。
比如用户在十秒内一直连续点击,但最后只会触发一次。
简单举例:
function debounce(){
var t = null;
return function(){
if(t){
clearTimeout(t)
}
t = setTimeout(()=>{
fn()
},1000);
}
}
-
节流:减少一段时间内的触发频率,比如5秒内只能触发一次。
如果用户在十秒内一直连续点击,则会触发两次。
简单举例:
function throttle(fn,delay){
var begin = 0;
return function(){
var cur = new Date().getTime();
if(cur - begin > delay){
fn.apply(this,arguments);
begin = cur
}
}
}
节流相对于防抖而言实现起来更加简单,根据自己的喜好来选择使用哪个就好啦