关于javascript:JS防抖和节流

36次阅读

共计 750 个字符,预计需要花费 2 分钟才能阅读完成。

防抖和节流:

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

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

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

正文完
 0