千峰老师前端性能优化之节流

大前锋名匠公开赛中的千峰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.onmousemove=throttle(function(){
   cont++;
    console.log("事件执行了"+cont+"次");

},1000)

  

  

原文地址:https://www.cnblogs.com/xiaojianwei/p/10986064.html