防抖和节流

/**
   * 防抖函数：在一定时间内多次执行相同的操作，在每次操作后都会重新执行;
   * 设计思路：
   * 1.防抖函数会在执行的时候清楚计时器的ID，并且重新执行至此这个操作；
   * 2.我们就必须使用闭包延长作用域链，让下次的函数的执行时也获取到上次的的计时器的ID。
   * */
  function debounce(fun, delay) {
    let timer;
    return function(args) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        fun(args);
      }, delay);
    };
  }
  const inputFun = function(value) {
    console.log(value);
  };
  const debounceInput = debounce(inputFun, 1000)
  document.getElementById("in").addEventListener("keyup", function (e) {
    debounceInput(e.target.value);
  });

/**
   * 节流函数是指在一定时间内只会执行一次代码；
   * 设计思路：
   * 1.首先我们设计一个节流阀，在当timer为false的话就能执行计时器的方法
   * 2.为timer赋值，并在计时器内部将timer修改为false
   * 3.使用闭包将timer的作用域延长
   * */
  
  function throttle(fun, wait) {
    let timer;
    return function () {
      if (!timer) {
        timer = setTimeout(function () {
          timer = false;
          fun();
        }, wait);
      }
    };
  }

  const btn = document.getElementById("btn");
  function btnClick() {
    console.log("这个btn被点击了");
  }
  const throttleBtn = throttle(btnClick, 1000);
  btn.addEventListener("click", function () {
    throttleBtn()
  })