zoukankan      html  css  js  c++  java
  • 千峰老师前端性能优化之节流

    大前锋名匠公开赛中的千峰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)
    

      

      

  • 相关阅读:
    回调函数设计方法
    C 时间函数总结
    linux多线程全面解析
    从为知笔记收费说起
    C++中strftime()的详细说明
    arguments.callee
    arguments 对象
    学习闭包
    this的call,apply,bind的方法总结--追梦子
    this指向--取自追梦子的文章
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/10986064.html
Copyright © 2011-2022 走看看