在很多时候,一系列事件会触发的很快,在这种事件中实时监听某个值的状态并在某个条件下执行其他操作,无疑会使性能变得十分狼狈。
为了方法讲解的简明易懂,我选择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
保留的仍然是上一次事件执行时的状态,当然不相等啦。
总结:此方法试用于只在状态发生改变时才需要执行相关代码
的情况。这里只是一个例子,可以延伸到很多需要优化性能的地方。