JS 函数节流和去抖

一、什么是节流和去抖？

　　节流。就是拧紧水龙头让水少流一点，可是不是不让水流了。想象一下在现实生活中有时候咱们须要接一桶水，接水的同时不想一直站在那等着，可能要离开一会去干一点别的事请，让水差很少流满一桶水的时候再回来，这个时候，不能把水龙头开的太大，否则还没回来水就已经满了，浪费了好多水，这时候就须要节流，让本身回来的时候水差很少满了。那在JS里有没有这种状况呢，典型的场景是图片懒加载监听页面的scoll事件，或者监听鼠标的mousemove事件，这些事件对应的处理方法至关于水，因为scroll和mousemove在鼠标移动的时候会被浏览器频繁的触发，会致使对应的事件也会被频繁的触发（水流的太快了），这样就会形成很大的浏览器资源开销，并且好多中间的处理是没必要要的，这样就会形成浏览器卡顿的现象，这时候就须要节流，如何节流呢？咱们没法作到让浏览器不去触发对应的事件，可是能够作到让处理事件的方法执行频率减小，从而减小对应的处理开销。

　　去抖。最先接触这个词应该是在高中物理里面学到的，有时候开关在在真正闭合以前可能会发生一些抖动现象，若是抖动的明显的话，对应的小灯泡可能会闪烁，把灯泡闪坏了不重要，万一把眼睛再给闪坏了可就麻烦了，这个时候就有去抖电路的出现。而在咱们的页面里，也有这种状况，假设咱们的一个输入框，输入内容的同时可能会去后台查询对应的联想 词，若是用户输入的同时，频繁的触发input事件，而后频繁的向后抬发送请，那么直到用户输入完成时，以前的请求都应该是多余的，假设网络慢一点，后台返回的数据比较慢，那么显示的联想词可能会出现频繁的变换，直到最后的一个请求返回。这个时候就能够在必定时间内监听是否再次输入，若是没有再次输入则认为本次输入完成，发送请求，不然就是断定用户仍在输入，不发送请求。

　　去抖和节流是不一样的，由于节流虽然中间的处理函数被限制了，可是只是减小了频率，而去抖则把中间的处理函数所有过滤掉了，只执行规断定时间内的最后一个事件。

二、JS实现。

　　前面BB了这么多，感谢你耐心的看到这里，接下来咱们来本身动手看看如何实现节流和去抖。

　　节流： 

    /** 实现思路：
    **  参数须要一个执行的频率，和一个对应的处理函数,
    **  内部须要一个lastTime 变量记录上一次执行的时间
    **/ function throttle (func, wait) {
      let lastTime = null
　　　　// 为了不每次调用lastTime都被清空，利用js的闭包返回一个function确保不生命全局变量也能够
      return function () {
        let now = new Date()
        // 若是上次执行的时间和此次触发的时间大于一个执行周期，则执行
        if (now - lastTime - wait > 0) {
          func()
          lastTime = now
        }
      }
    }

再看如何调用：

// 因为闭包的存在，调用会不同
let throttleRun = throttle(() => {
    console.log(123)
}, 400)

window.addEventListener('scroll', throttleRun)

 这时候f疯狂的滚动页面，会发现会400ms打印一个123，而没有节流的话会不断地打印， 你能够改变wait参数去感觉下不一样。

可是到这里，咱们的节流方法是不完善的，由于咱们的方法没有获取事件发生时的this对象，并且因为咱们的方法简单粗暴的经过判断此次触发的时间和上次执行时间的间隔来决定是否执行回调，这样就会形成最后一次触发没法执行，或者用户出发的间隔确实很短，也没法执行，形成了误杀，因此须要对方法进行完善。

　　function throttle (func, wait) {
      let lastTime = null
      let timeout
      return function () {
        let context = this
        let now = new Date()
        // 若是上次执行的时间和此次触发的时间大于一个执行周期，则执行
        if (now - lastTime - wait > 0) {
          // 若是以前有了定时任务则清除
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          func.apply(context, arguments)
          lastTime = now
        } else if (!timeout) {
          timeout = setTimeout(() => {
            // 改变执行上下文环境
            func.apply(context, arguments)
          }, wait)
        }
      }
    }

这样咱们的方法就相对完善了，调用方法和以前相同。

  　　去抖：

　　去抖的方法，和节流思路一致，可是只有在抖动被断定结束后，方法才会获得执行。

   debounce (func, wait) {
      let lastTime = null
      let timeout
      return function () {
        let context = this
        let now = new Date()
        // 断定不是一次抖动
        if (now - lastTime - wait > 0) {
          setTimeout(() => {
            func.apply(context, arguments)
          }, wait)
        } else {
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          timeout = setTimeout(() => {
            func.apply(context, arguments)
          }, wait)
        }
        // 注意这里lastTime是上次的触发时间
        lastTime = now
      }
    }

　　这时候按照以前一样的方式调用，会发现不管怎么疯狂的滚动窗口，只有中止滚动时，才会执行对应的事件。

　　去抖和节流已经有不少成熟的js进行了实现，其大体思路基本是这样的。

 

注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。