连续触发的事件如何降低执行频率?
-
最近遇到一个问题,需要监听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做得更好一些,没有出现兼容问题
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏