防抖 节流

防抖

    /* 
      1 当我输入完毕了， 你再去发送请求！！ 
      2 如何判断输入完毕
        1 如果你输入了文字 过了 2s中，都没有新的输入 我就认为 你输入完毕了 

      3 延时器 


      4 过程
        1 每一次按下按键
          1 清除上一个延时器
          2 开启新的延时器 

        2 例如
          1 按下 按键  "A"
          2 开启一个延时器  => "A" 发送给后端

          3 按下 按键  "AB"
          4  先清空上一个 延时器 “A”
          5  开启一个延时器  => "AB" 发送给后端

          6 按下 按键  "ABC"
          7 先清空上一个 延时器 “AB”
          8 开启一个延时器  => "ABC" 发送给后端

       */

      const input = document.querySelector('input');

      let timeId;
      input.addEventListener('input', function () {
        clearTimeout(timeId);
        timeId = setTimeout(function () {
          // 正常业务
          console.log('发送请求出去');
          // 正常业务
        }, 2000);
      });

节流

 <button>发送验证码</button>
    <script>
        /* 
        1 点击按钮的时候
          判断 是否允许执行业务 条件
        2 满足条件  允许执行
        3 不满足条件  不允许执行 
        4 延时器时间到了， 重新允许执行 
        
         */
        const button = document.querySelector('button');
        button.addEventListener('click', function () {
            button.disabled = true; // 禁用按钮
            // console.log('发送一次验证码');
            let times = 3;
            let timeId = setInterval(() => {
                times--;
                console.log(times);
                if (times === 0) {
                    clearInterval(timeId);
                    button.disabled = false;
                }
            }, 1000);
        });
    </script>