节流和防抖是较为相似的概念，本文先从概念上理解，然后探讨其应用场景，最后实现这两个函数。

节流

1. 概念

用户的方法在某个时间段只执行一次，即每指定时间内最多只调用一个函数。
用一个自身理解的例子来说就是：建造水坝在河道中，我们不能让水不能流动，而是只能让水流动慢一些。

2. 应用场景

  1. 搜索框输入时的实时联想

  2. 监听 scroll 事件计算位置信息

    3. 流程图

    节流函数和防抖函数 - 图1

    4. 代码实现

    1. function throttle(func, wait) {
    2. let lastTime = 0;    // 上一次执行时间
    3. let time = null;    // 定时器
    5. return function () {
    6.  if (time) {
    7.    clearTimeout(time);         // 清除定时器
    8.    time = null;
    9.  }
    11.  let self = this;
    12.  let args = arguments;
    13.  let nowTime = +new Date();
    15.  const remainWaitTime = wait - (nowTime - lastTime);     // 剩余等待执行时间
    17.  if (remainWaitTime <= 0) {
    18.    // 更新执行时间，执行函数
    19.    lastTime = nowTime;
    20.    func.apply(self, args);
    21.  } else {
    22.    // 在剩余执行时间过后，更新时间，执行函数，重置定时器
    23.    timer = setTimeout(function () {
    24.      lastTime = +new Date();
    25.      func.apply(self, args);
    26.      timer = null;
    27.    }, remainWaitTime);
    28.  }
    29. };
    30. }

    防抖

    1. 概念

    在某个事件内的N个动作会被忽略，只有事件后由程序触发的动作是有效的。直白一点的话，就是自最近一次触发后延迟指定时间调用函数。
    用一个自身理解的例子就是：我正在抖腿，等到不抖腿了才会行走。

    2. 应用场景

  3. input输入框架的格式验证

  4. 提交按钮的点击事件

    3. 流程图

    节流函数和防抖函数 - 图2

    4. 代码实现

    1. function debounce(func, wait) {
    2. let time = null;
    4. return function() {
    5.  if (time) {
    6.    clearTimeout(time);    // 清除定时器
    7.    time = null;
    8.  }
    10.  let self = this;
    11.  let args = arguments;
    13.  time = setTimeout(function () {
    14.    func.apply(self, args);     // 执行函数
    15.    time = null;
    16.  }, wait);
    17. }
    18. }