javascript-函数节流理解和仿写

解释一下,我认为的函数节流:

多次触发事件,但是一个规定时间内,该事件只会执行一次

具体例子,我第一次触发事件,开始计时,在后续的多次事件触发中,某次触发的时间距离我开始计时的时间,他们的时间间隔达到了规定的时间段,这是我们就会执行一次该事件,并把该事件的执行时间作为新的开始计时,以此循环,保证在一段时间内,只有一次执行,大大降低了函数的执行频率.这就是函数节流

常见的场景:我们下滑页面,在下滑到一定程度时,会出现返回顶部按钮,正常情况下,我们每下滑一下,都会是返回顶部事件多次计算当前距离,而当我们用函数节流后,在一段事件内只会触发一次,降低了事件的触发频率,达到了性能优化

 编写思路就是利用闭包可以长时间保存某个变量,并且在外部可以访问

function throlle(callback,delay){
  let startTime=0;
  return function (){
    //使用new Date().getTime(),这样首次操作一定会执行
    let endTime=new Date().getTime();
    //第一次减法一定大雨delay,确保首次操作一定会执行
    if(endTime-startTime>delay){
      callback.apply(this,arguments)
      startTime=new Date().getTime();
    }
  }
}
document.getElementById('box').addEventListener('click',throlle(()=>{
console.log(11);
},1000))

 

posted @ 2019-11-29 17:12  大笛子  阅读(105)  评论(0编辑  收藏  举报