函数节流与防抖

114 阅读1分钟

函数节流

一个函数在执行一次后,只有大于设定的执行周期后才会执行第二次,有个需要频繁触发的函数,处于性能角度,在规定时间内,只让函数触发第一次生效,后面不生效。

function throttle(fn,delay){
      var startTime = 0;
      return function(){
          var nowTime = Date.now();
          if(nowTime - startTime > delay){
              fn.bind(this)();
              startTime = nowTime;
          }
      }
}

注意,this指向会改变,this指向window,需要改回来。

函数防抖

一个需要频繁触发的函数,在规定时间内只让最后一次生效,前面的不生效。

function debounce(fn, delay) {
    var timer = null;
    return function () {
        clearInterval(timer);
        timer = setTimeout(()=>{
            fn.apply(this);
        },delay)
    }
}

注意,this指向会改变,this指向window,需要改回来。