防抖和节流 （It is important!）

防抖和节流的含义

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

防抖和节流的另类理解

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

防抖简便代码

      var btn1 = document.querySelector("#btn1");

      function debounce(fn) {
          var a = null
          return function() {
              // fn()
              clearTimeout(a);
              a = setTimeout(() => {
                  fn()
              }, 1000);
          }
      }

      function fangdou() {
          console.log('1');
      }

        btn1.onclick = debounce(fangdou);

节流简便代码

   var btn = document.querySelector('button')

        function throttling(fn) {
            var lasttime = 0
            return function() {

                setTimeout(() => {
                    var nowtime = new Date().getTime()
                        // console.log(nowtime);
                    if ((nowtime - lasttime) > 2000) {
                        lasttime = nowtime
                        fn()
                    }
                }, 2000);
            }
        }

        function jieliu() {
            console.log('jieliu');
        }
        btn.onclick = throttling(jieliu)

其他可能用到的场景

防抖在连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听
搜索框，搜索联想功能