优化高频事件的性能

我们在web项目中经常会需要用到 图片懒加载 ，设置中我们需要监听scroll滚动条滚动事件 。这种事件响应得十分频繁，当我们监听器的回调函数越复杂，对性能影响就会越严重。为此我们利用定时器，使事件回调函数在监听中按照固定的事件间隔触发，而不是每像素移动都触发。

跟普通的事件监听设置基本一样，我们只要对回调函数体进行一次封装。
这里我封装了一个函数，参考了小程序API的设计模式，我们只传递一个map。

lazyEvent.throttle({
        dom: window, // 绑定事件监听的dom
        eventName: 'scroll', // 监听什么事件
        delay: 100, // 回调函数触发的时间间隔
        event: res => { // 回调函数执行了什么
          console.log(1)
        }
      })

接下来我们只需要看懂下文标记的10行左右代码即可学会函数节流

export class lazyEvent {
  constructor() {}
  /* 函数节流 */
  static throttle(map){
    /* 取map传进来的值 */
    let DOM = map.dom
    let eventName = map.eventName
    let event = map.event
    let delay = map.delay ? map.delay : 100
    
    /* ----------------这里是重点↓ ------------------*/
    let timer = null  // 外部定义timer变量，用来存定时器ID
    let newEvent = function () {  //  声明一个新函数，用来包裹我们目标函数体
      if(timer){  //  如果有定时器就不继续执行下面的代码
        return
      }else{  //  如果没有定时器就执行目标函数体，然后设置一个定时器
        event()  //  目标函数体

        timer = setTimeout(function () {  // 这个定时器一个时间间隔后会销毁自身
          clearTimeout(timer)
          timer = null
        },delay)

      }
    }
    /* -----------------这里是重点↑ --------------------*/


    DOM.addEventListener(eventName, newEvent)
  }
}

1.首先呢，这个 newEvent就是一层皮，里面包了我们 真正要执行的事件响应，以及我们本次要添加的一个定时器。
2.定时器函数的返回值是这个 定时器的ID 我们需要在 '皮' 外 存一下。
3.这个定时器的回调函数就是销毁它自身，并且清空我们存储的ID，所以我们可以通过ID判断当前有没有定时器。
4.我们进入 '皮' 里有一个判断，现在有定时器吗？ 如果有我们就立即结束本次响应。如果没有我们就执行我们的目标 -- 响应事件，然后没有我们就再做一个定时器呗。

以上就是函数节流的主要内容，希望大家能够学会。ps.类似的事件还有resize，mousemove这种。