大前锋名匠公开赛中的千峰root老师讲解了前端的性能优化之节流与防抖,这里是节流的方法。
节流:即在一定时间内减少事件执行的次数。
root老师是通过闭包的方式解决的节流问题。
code如下:
<div class="box"></div>
//通过函数闭包实现节流
function throttle(callback,wait){
//设置上吃执行时间
let prev = 0;
//返回函数
return function(){
//获取当前时间戳
let now = Date.now();
//获取参数
let args = arguments;
//上一个时间与当前时间做判断
if(now - prev > wait){//如果当前时间戳减去上一次执行的时间戳大于设置的时间数,就执行
//设置this指向
callback.apply(this,args);
//更新执行时间
prev = now;
}
}
}
//获取元素
let box=document.querySelector(".box");
//次数
let cont=0;
//设置事件
box.οnmοusemοve=throttle(function(){
cont++;
console.log("事件执行了"+cont+"次");
},1000)