JS:防抖和节流

防抖和节流:

均是减小某一函数频繁执行消耗内存和资源的状况(减小执行次数)。

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

场景举例:用户滚轮滑动显示距离页顶的高度。
  //显示页顶高度
  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);

节流:类型于技能冷却,触发后必定时间再也不触发函数

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)
     }
   }
 }
相关文章
相关标签/搜索