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



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



  • 可以使用 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做得更好一些,没有出现兼容问题


Log in to reply