防抖和节流的区别，实现和用处。

1，什么是防抖和节流

        防抖：防抖指的是在一段时间内重复触发某一事件，只会执行指定时间后的最后一次。

                        

        节流：节流是指触发的事件会在指定的时间间隔才会生效一次。

                                                             

        

2，防抖和节流的区别

               防抖是在重复触发某一事件时只会在指定时间过后触发成功最后一次事件，而节流是在重复触发某一事件的时候会每隔指定时间后触发成功一次。

3，防抖和节流的实现

        防抖代码：

var debounce = function (fn, t) {
      var timer = null;
      return () => {
        clearTimeout(timer);
        timer = setTimeout(fn, t);
      };
    };

        节流代码：

var throttle = (fn, t) => {
      var index = false;
      return () => {
        if (!index) {
          index = true;
          setTimeout(() => {
            fn();
            index = false;
          }, t);
        }
      };
    };

4，使用的场景

        防抖在连续的事件，只需触发一次回调的场景有：      

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

        节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能

5，总结

        防抖和节流本质上是优化高频率执行代码的一种手段

        浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事                        件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率。