js防抖与节流

防抖

防抖原理：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发

function debounce(fn, delay) {
   let timer = null;
   return function () {
    if (timer) {
       clearTimeout(timer);
    }
      timer = setTimeout(fn, delay);
    }
}

节流

节流原理：在一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数

// 定时器+时间戳
function throttle(fn, delay) {
      var timer = null;
      var startTime = Date.now();
      return function () {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if (remaining <= 0) {
          func.apply(context, args);
          startTime = Date.now();
        } else {
          timer = setTimeout(func, remaining);
        }
      }
}

// 定时器
function throttle(fn, delay) {
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, delay);
        }
      }
}

以上二者区别：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数