【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始终为ture，switchBlur(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);
      }
});

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

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