用函数节流与函数防抖的目的，就是为了降低回调执行频率，节约计算机资源，提升用户体验。

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
电梯第一个人进来后，15秒后准时运送一次，这是节流；
电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。

执行频率.png

节流

节流一般是用在滚动条滚动onscroll、鼠标移动onmousemove的函数，间隔一段时间执行一次，可以减少响应次数；
实现：设置一个标志位用于标记函数是否可以执行；

  function scrollFn(e) {
    console.log("请求接口", e.target.value);
  }
 // 节流 
  function throttle(fn) {
    let flag = true; //默认执行完毕了
    return function (e) {
      if (!flag) {
        //false时return，上次没有执行完，没有必要再执行
        return;
      }
      flag = false; //改为没有执行
      setTimeout(() => {
       fn && fn(e)
        flag = true; //执行完之后再改为true
      }, 100);
    };
  }
  const onscroll = throttle(scrollFn);

防抖

防抖一般是用来，用户输入有操作时，暂时不执行动作，等待没有新操作时，进行相应响应，例如input输入时搜索，可以等待用户输入完成后再发送请求；窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
解决思路：
1.在第一次事件触发时，不立即执行函数，而是设定一个期限值；
2.若在期限值内，事件没有再次被触发，则执行函数；
若在期限值内，事件被再次触发，则清除当前计时器，重新开始记时。

 function inputFn(e) {
    console.log("请求接口", e.target.value);
  }

  // 防抖 
  function debounce(fn) {
    let timer = null;
    return function (e) {
      if (timer) {
        clearTimeout(timer);//触发了相同事件，取消当前计时，重新开始计时
      }
      timer = setTimeout(() => fn && fn(e), 1000);////第一次执行，开始一个计时器
    };
  }
    // 输入完之后请求一次
    document.getElementById("inputId").oninput = debounce(inputFn);