JS的防抖和节流

防抖（JS的事件多次触发，只执行最后一次）

应用场景： input输入信息进行搜索，如果每敲一个字符就请求后台接口，给后台的压力太大了，所以做好防抖，即让程序只执行最后一次的事件。 为解决该问题，探索到了两个解决方案：

• 方案一：闭包防抖 之前有看过用全局变量进行防抖的案例，但个人认为还是用闭包模块化实现起来更完美，这样业务层的代码可以清晰展现出来，方便多人协作团队看懂代码。

  <input type="text">

  <script>
    let inp = document.querySelector('input');

    inp.oninput = debounce(function() {
      console.log(this.value);  // 业务都在这里
    }, 500)

    function debounce(fn,delay) {
      let t = null;
      return function(){
        if (t!= null) {
          clearTimeout(t)
        }
        t = setTimeout(() => {
          // 这里注意 不能直接是fn() 因为this指向是window
          fn.call(this)
        }, delay)
      }
    }
  </script>

• 方案二：

直接使用lodash工具库的debounce方法 参考网址：blog.csdn.net/qq_39139322…

节流（控制高频事件执行次数）

应用场景： 滚轮滚动触发事件频繁，加上延迟可低频触发 看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~

window.onscroll = throttle(function() {
      console.log('hello world');
    }, 500)
    function throttle (fn, delay) {
      let flag = true;
      return function () {
        if (flag) {
          setTimeout(() => {
            fn.call(this)
            flag = true
          },delay)
        }
        flag = false
      }
    }