【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保留的仍然是上一次事件执行时的状态，当然不相等啦。

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