js-防抖&节流的个人理解与封装

相信大家一定被这俩兄弟整的恶心得很。防抖是啥啊？节流又是啥？啥意思啊。

当然啦，肯定也有大佬比较认真的在学之前就花功夫知道了什么是防抖，什么是节流。

就我个人理解：

• 防抖：多次执行方法变为最后一次执行。
• 节流：多次方法执行稀释为每一段时间执行。

恩……好像有点抽象，我再试试：

场景：你妈妈让你 今天扫地，扫地，加扫地。

• 防抖：在一个时间段里听到的所有扫地，只在最后一吃听到时扫一次。
• 节流：一边扫地一边听，扫完地后歇一歇，接着扫。

恩……好像还是有点抽象。诶，能力有限呀。

接下来奉上封装好的成果：

防抖

/**
 * @params fn   回调函数，放入需要防抖处理的方法体
 * @params wait 等待时间，在一个时间段内做防抖操作
 */
function antiShake(fn, wait) {
  var timeout = null;
  return function () {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}

节流

/**
 * @params fn   回调函数，放入需要节流处理的方法体
 * @params wait 方法多次执行时，稀释的时间
 */
function reduceExpenditure(fn, wait) {
  var timer = null;
  var startTime = Date.now();
  return function () {
    var curTime = Date.now();
    var remaining = wait - (curTime - startTime);
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    if (remaining <= 0) {
      fn.apply(context, args);
      startTime = Date.now();
    } else {
      timer = setTimeout(fn, remaining);
    }
  };
}

使用示例如下：

  window.addEventListener("mousedown", antiShake(click, 1000));
  window.addEventListener("mousedown", reduceExpenditure(click, 1000));
  function click() {
    console.log("测试");
  }

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。