js实现防抖和节流

利用闭包机制简单实现函数防抖和节流

• 防抖 debounce：在规定的时间内只会执行一次

  function debounce(fn, time) {
    time = time ? time : 500;
    var timer;
    return function (...params) {
      var that = this;
      // 每次执行之前判断是否已经有定时器了，如果有了就先清除定时器再重新创建定时器
      timer ? clearTimeout(timer) : null;
      timer = setTimeout(() => {
        // 使用call保证函数执行时函数中的this不变
        fn.call(that, ...params);
      }, time);
    }
  }

• 节流 throttle：在规定的时间内才会执行一次

function throttle(fn, time) {
    time = time ? time : 500;
    var flag = false; // 使用一个标记
    return function () {
    // 每次执行函数之前判断是否满足触发函数的条件
      if (flag) return; 
      flag = true;
      setTimeout(() => {
        fn();
        flag = false; // 执行完毕之后将标记置为false
      },time)
    }
  }