手写节流防抖

函数的节流防抖

函数的节流防抖，是一种用来优化前端的方式和手段，当我们使用input输入框的时候，当我们按下键盘并一直触发keypress等事件，会不停的去触发事件的回调函数，大大浪费了资源，降低了前端性能，于是，就出现了这个概念，节流和防抖。

节流

我们可以这样认为，以一款游戏“英雄联盟”来进行举例说明。当我们按下E键的时候，出发了技能的使用，但我们不能无限的使用。因为这个技能是有冷却时间的。

同理，节流的原理就是技能处于冷却中的阶段

// 节流
  const skill = () => {
    let kill = false;  // 技能位处于冷却中
    return () => {
      if (kill) {
        return console.log("技能冷却中");
      }
      kill = true;  // 技能处于冷却中
      console.log("释放技能");
      setTimeout(() => {
        kill = false;
        console.log("技能冷却完成");
      }, 3000);
    };
  };
  const e2 = skill();

防抖

我们还以“英雄联盟”为例子，当角色回城的时候被打断了，那么此时，我们是不是还得按B键来回城？那是不是时间又要重新计时了。

总体来说，防抖就是 回城被打断

// 防抖
  const rtn = () => {
    let timeout = null;
    return () => {
      if (timeout !== null) {
        clearTimeout(timeout);
        console.log("回城被打断");  // 打断回城，setTimeout执行一次，B的值就不为空了
      }
      timeout = setTimeout(() => {  // 重新回城
        timeout = null;
        console.log("已回城");
      }, 3000);
    };
  };
  const b = rtn();