秋招撕代码之节流与防抖

2018-08-31

今天面依图，让手写这个，没写出来，总结一下。

1、防抖：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。利用闭包，保存timer变量使之不被销毁，常驻内存。

function debounce(method,delay) {
    var timer;//只会第一次调用函数的时候设置，以后都只执行闭包的函数
    return function(){
        clearTimeout(timer);
        timer=setTimeout(method,delay)
    }
}

2、节流：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。隔一段时间触发一次。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

  // 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,startTime = new Date();

    return function() {
       var curTime = new Date();
      // 如果达到了规定的触发时间间隔，触发 handler
      if(curTime - startTime >= mustRun){
          func();
          startTime = curTime;
      // 没达到触发间隔，重新设定定时器
      }else{
            clearTimeout(timeout);
          timeout = setTimeout(func, wait);
      }
  };
};