资讯专栏INFORMATION COLUMN

【JS】在连续性监听事件中,监听当前状态是否变化

Cciradih / 1330人阅读

摘要:表示此次事件前一次的状态或,而自然表示当前的状态,每次事件执行时,无论状态是否发生状态改变,都把原先的值赋给,而则更新到最新的状态。

在很多时候,一系列事件会触发的很快,在这种事件中实时监听某个值的状态并在某个条件下执行其他操作,无疑会使性能变得十分狼狈。

为了方法讲解的简明易懂,我选择jQuery的scroll事件来表述。

</>复制代码

  1. var wh = $(window).height();
  2. $(document).on("scroll",function() {
  3. var sh = $(document).scrollTop();
  4. if(sh
  5. 如示例代码所示,每次监听到scroll事件,都会执行switchBlur函数。比如此时的状态是不模糊,若sh始终为tureswitchBlur(0)完全没必要执行。

  6. 下面改进一下代码:

  7. </>复制代码

    1. var blur_px;
    2. var s1 = 0;
    3. var s2 = 0;
    4. var wh = $(window).height();
    5. $(document).on("scroll",function() {
    6. var sh = $(document).scrollTop();
    7. if(sh
    8. 我使用s1s2记录两个时刻的状态。s1表示此次scroll事件前一次的状态(0或1),而s2自然表示当前的状态,每次事件执行时,无论状态是否发生状态改变,都把原先s2的值赋给s1,而s2则更新到最新的状态。可以发现,switchBlur函数只在s1不等于s2的时候执行,那么什么时候s1不等于s2呢?答案就是状态发生改变的时候,s2已经是最新的状态,此时s1保留的仍然是上一次事件执行时的状态,当然不相等啦。

    9. 总结:此方法试用于只在状态发生改变时才需要执行相关代码的情况。这里只是一个例子,可以延伸到很多需要优化性能的地方。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86186.html

相关文章

  • JS续性监听事件监听当前状态是否变化

    摘要:表示此次事件前一次的状态或,而自然表示当前的状态,每次事件执行时,无论状态是否发生状态改变,都把原先的值赋给,而则更新到最新的状态。 在很多时候,一系列事件会触发的很快,在这种事件中实时监听某个值的状态并在某个条件下执行其他操作,无疑会使性能变得十分狼狈。 为了方法讲解的简明易懂,我选择jQuery的scroll事件来表述。 var wh = $(window).height(); $...

    justCoding 评论0 收藏0
  • 浏览器常用事件解析

    摘要:之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意,页面从浏览器缓存加载,并不会触发事件。事件有一个属性,返回一个布尔值。此外,不支持事件,可以使用事件代替。 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contente...

    zhoutk 评论0 收藏0
  • 浏览器常用事件解析

    摘要:之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意,页面从浏览器缓存加载,并不会触发事件。事件有一个属性,返回一个布尔值。此外,不支持事件,可以使用事件代替。 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contente...

    Richard_Gao 评论0 收藏0
  • JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化

    摘要:复杂性的增加使得在应用程序生命周期的每个给定时刻都很难知道的确切状态。概述用来监视变动。这个被创建的对象有三个方法启动监听用来停止观察返用来清除变动记录,即不再处理未处理的变动。使用浏览器方法,可以设置一个任务,定期检查是否发生了任何更改。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! ...

    jasperyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<