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

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

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

var wh = $(window).height();
$(document).on('scroll',function() {
    var sh = $(document).scrollTop();
    if(sh<wh){
        switchBlur(0);//不模糊
      }else {
         switchBlur(10);//模糊
      }
});

如示例代码所示,每次监听到scroll事件,都会执行switchBlur函数。比如此时的状态是不模糊,若sh<wh始终为tureswitchBlur(0)完全没必要执行。

下面改进一下代码:

var blur_px;
var s1 = 0;
var s2 = 0;
var wh = $(window).height();
$(document).on('scroll',function() {
    var sh = $(document).scrollTop();
    if(sh<wh){
        s1 = s2;
        s2 = 0;
        blur_px = 0;
      }else {
        s1 = s2;
        s2 = 1;
        blur_px = 10;
      }
      if(s1!=s2){
        switchBlur(blur_px);
      }
});

我使用s1s2记录两个时刻的状态。s1表示此次scroll事件前一次的状态(0或1),而s2自然表示当前的状态,每次事件执行时,无论状态是否发生状态改变,都把原先s2的值赋给s1,而s2则更新到最新的状态。可以发现,switchBlur函数只在s1不等于s2的时候执行,那么什么时候s1不等于s2呢?答案就是状态发生改变的时候,s2已经是最新的状态,此时s1保留的仍然是上一次事件执行时的状态,当然不相等啦。

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

    原文作者:条件状语从句
    原文地址: https://segmentfault.com/a/1190000003982208
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞