JavaScript手写实现简单的节流防抖

530 阅读1分钟

1.函数节流:在短时间n内频繁触发同一个事件,n内函数只执行一次,只有过了设定的时间才执行下一次。

fn:要被节流的函数,delay:规定的时间
function throttle(fn,delay){
   // 记录上一次函数出发的时间
   var lastTime = 0
   return function(){
    // 记录当前函数触发的时间
    var nowTime = new Date().getTime()
    // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
    if(nowTime - lastTime > delay){
    // 绑定this指向
    fn.call(this)
    //同步时间
    lastTime = nowTime
    }
  }
}   

2.函数防抖:在短时间n内频繁触发某一事件,在规定时间n内再触发就重新计时,只让最后一次生效。

function debounce(fn,delay){
           var timer = null
        //  清除上一次定时器
          return function(){
               clearTimeout(timer)
              //  重新设置一个新的定时器
              timer = setTimeout(() => {
                  fn.call(this)
              }, delay);
          }
       }