函数防抖,函数节流。详解！！！

函数防抖:debounce

我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求， onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件， 咋办呢？这时候就应该用到函数防抖和函数节流了！

//应用场景，百度搜索框，监控文本框内容变化， 但是他不是时时刻刻监控，我们打完字后会等一下才自动搜索，可以自己取百度搜索体验一下

监控窗口发生变化的函数,如果不用函数防抖，
那么在拖动的过程中会触发很多次，这不是我们想看到了

• 1.不添加函数防抖的window.onresize函数
  当你窗口拖动时，会连续触发很多次，输出很多次aaaa。

window.onresize = function () {
   
      console.log("aaaa");
    }

• 2.简单封装过后的函数防抖，运行过后发现并没有什么卵用，只不过是延迟了一秒在重复上面的操作，自己试试 体验一下这个思考的过程。然后我们再继续优化

window.onresize = function () {
   
      debounce(function () {
   
        console.log("a");
      }, 1000)
    }
    /**
     * 函数防抖
     * callback，传入需要运行的函数
     * time ，多少时间后运行这个函数
     */
    function debounce(callback, time) {
   
      setTimeout(function () {
   
        callback();
      }, time)
    }

• 3.我们再换一种方式处理，每次调用setTime之前我们把计时器id清除，这个时候就发现 一个粗糙的函数防抖已经做好了，但是这个有个缺点，定义了一个timer污染了全局变量，所以并不是完美的，还需要继续优化

window.onresize = function () {
   
      debounce(function () {
   
        console.log("a");
      }, 1000)
    }
    /**
     * 函数防抖
     * callback，传入需要运行的函数
     * time ，多少时间后运行这个函数
     */
    var timer;
    function debounce(callback, time) {
   
      clearTimeout(timer)
      timer =