标题: 前端防抖和节流js实现 [打印本页]

作者: xmjso6666    时间: 2021-7-7 19:13
标题: 前端防抖和节流js实现
防抖和节流:均是减少某一函数频繁执行消耗内存和资源的情况(减少执行次数)。

    防抖:规定在多久时间内没有动作触发函数才执行该函数。


    场景举例:用户滚轮滑动显示距离页顶的高度。
      //显示页顶高度
      function showTop(){
        console.log(document.body.scrollTop||document.documentElement.scrollTop)
        time = null;
      }
      //防抖函数
      function rejectShook(){
        var time = null;
        return function(){
          if(time==null){
          //新建计时器,到时console
              time = setTimeout(showTop,200)
          }else{
          //没到时间删除老计时器,新建另一计时器.
               clearTimeout(timer);
               time =setTimeout(showTop,200)
          }
        }
      }
    window.onscroll =rejectShook(showTop);

  2.节流:类型于技能冷却,触发后一定时间不再触发
     function showTop(){
        console.log(document.body.scrollTop||document.documentElement.scrollTop;);
     }
     window.onscroll =lessRender();
     function lessRender(){
       //定义一个冷却,初始未冷却:false
       var lique =false;
       return function(){
        //查询当前状态
           if(lique){
             return;~~~~
           }else{
             show();
             lique = true;
             //重新进入冷却,2s后可以再触发
             setTimeout(()=>{lique=false},2000)
         }
       }
     }







欢迎光临 (http://www.51hei.com/bbs/) Powered by Discuz! X3.1