【JS】在連續性監聽事件中，監聽當前狀態是否變化

條件狀語從句發表於2019-05-14
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保留的仍然是上一次事件執行時的狀態，當然不相等啦。

總結：此方法試用於只在狀態發生改變時才需要執行相關程式碼的情況。這裡只是一個例子，可以延伸到很多需要優化效能的地方。

相關文章