连续触发的事件如何降低执行频率?

ruokai728

最近遇到一个问题，需要监听window.onresize事件，并且在该事件下执行一些特殊div尺寸的宽高计算代码，但是发现resize事件会随着窗口改变一直触发，每次触发都要执行一遍复杂的逻辑计算，有没有办法降低这个执行的频率?

paoga5008

可以使用 debounce 解决该问题，debounce 是专门处理高频事件的一种方案，原理不在此讲解
直接上示例代码，lodash 和 underscore这两个js库都有debounce 函数，可以根据自己的喜欢任选一个库来使用，下面选用lodash 以模块开发的引入方式举例：

import _ from 'lodash'

export default class {
  constructor() {

    // 监听resize事件
    window.addEventListener('resize', this.resize.bind(this))

  }

  // 将高频事件降到低频
  resize: _.debounce(function() {
    // TODO: 在这里处理事件触发后的逻辑代码
  }, 100) 
    // 100为频率间隔事件，这里的100代表100毫秒内如果resize没有触发，则认为resize已经执行完毕
}

从文档的友好性和使用人数上面来讲的话，lodash用户较多，这两个库功能相差不大
但实战中发现，lodash 在网页内表现良好，但是到了小程序中，会有一些兼容问题，这方面underscore做得更好一些，没有出现兼容问题