防抖和节流

防抖

使用场景  (事件多次触发只执行最后一次)

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存

<input type="text" id="input" placeholder="请输入内容" />
    <script>
      /*
       1.当持续触发事件 (键盘一直输入)，一定时间内没有再触发事件 (键盘抬起了)，事件处理函数才会执行一次，
         如果设定的时间来到之前 又一次触发了事件 就重新开始延时
       2.存储timer变量，所有独立的执行函数都能访问到这个timer变量，而且现在这个timer变量
         只创建了一次，是唯一的，我们只不过不断给timer赋值进行延时而已，每个清除延时就是
         清除上一个定义的延时，相当于多个函数公用同一个外部变量
      */
      function debounce(callback, delay) {
      if (typeof callback !== 'function') { // 参数类型为函数
        throw new TypeError('callback is not a function');
      }
        let timer;
        return function () {
          if (timer !== null) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            // 通过call让调用时的函数指向input输入框(apply也可以)
            callback.call(this);
          }, delay);
        };
      }
      // 获取节点
      let input = document.getElementById("input");
      // 监听按键
      input.oninput = debounce(function () {
        console.log(this.value);
      }, 1000);

//方式2

      function debounce(fun, delay) {
        return function (...args) {
          clearTimeout(fun.id);
          fun.id = setTimeout(() => {
            fun.call(this, ...args);
          }, delay);
        };
      }

      let inputb = document.getElementById("debounce");
      let debounceAjax = debounce((content, arg, obj) => {
        console.log(" content ", content);
        console.log(" arg ", arg);
        console.log(" obj ", obj);
      }, 1000);
      inputb.addEventListener("keyup", function (e) {
        debounceAjax(e.target.value, { x: 5, y: 10 }, { z: 5, k: 10 });
      });

节流

使用场景  (事件多次触发减少执行次数)

1. scroll 事件，每隔一秒计算一次位置信息等
2. 浏览器播放事件，每个一秒计算一次进度信息等

// 获取节点
      let input = document.getElementById("input");
      function throttle(callback, delay) {
        let flag = true;
        return function () {
          if (flag) {
            setTimeout(() => {
              callback.call(this);
              flag = true;
            }, delay);
          }
          flag = false;
        };
      }
      input.oninput = throttle(function () {
        console.log(this.value);
      }, 1000);
      window.onscroll = throttle(function () {
        console.log("hello");
      }, 1000);