Navigation

    西南IT社区
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 工作机会
    • 活动
    • 项目

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

    技术答疑
    事件降频
    2
    2
    31
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ruokai728
      ruokai728 last edited by

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

      1 Reply Last reply Reply Quote 0
      • paoga5008
        paoga5008 last edited by

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        使用HTML构建办公软件 使用HTML构建办公软件 使用HTML构建办公软件
        1
        光
        A
        庆
        小
        U
        Y
        L
        I
        Z
        I
        Y
        C
        Z
        E
        Y
        U
        I
        A
        Z
        Y
        Y
        罗
        R

        西南地区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
        西藏
        社群
        昆明网页设计交流吧
        友情链接
        • Funtask
        • Funtask 社区
        • SUWIS
        ©2019-2021 滇ICP备20006698号