js节流与防抖
什么是节流,什么是防抖,有什么作用?作用于哪里?
节流:在规定时间内,只执行第一次 (常见用于点击事件,例如小米官网的轮播图切换,无论你左右快速点击多少次,它只会在规定的时间内执行第一次);
防抖:在规定事件内,只执行最后一次(主要用于键盘事件,例如我们平时打的游戏lol)
节流:
//封装函数写法:
function s(fn,time){
let start = 0;
return function(){
let data = new Date;
if(data - start>time){
fn();
start = data;
}
}
}
let fun = s(function(){
console.log("这里是执行代码")
},1000);
document.addEventListener('click',fun,false);
//简易写法(推荐):
let start = 0;
document.addEventListener('click',function(){
let data = new Date;
if(data - start>1000){
fun();
start = data;
}
},false)
function fun(){
console.log("这里是执行函数");
}
防抖:
//函数写法:
function fun1(fn,time){
let start = null;
return function(){
clearTimeout(start);
start = setTimeout(fn,time)
}
}
let fun = fun1(function(){
console.log("这里是执行函数");
},1000)
document.addEventListener('click',fun,false);
//简易写法:
let start = null;
document.addEventListener('click',function(){
clearTimeout(start);
start = setTimeout(function(){
console.log("这里是执行代码")
},1000)
},false);