ZWH ZONE

[jQuery] 事件處理技巧：Decide resize (and scroll)

zhiwei. huang -

相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生，近期在開發 jQuery Plugin 時 ， 碰到一個問題 ， 我需要在 resize 事件發生時 ， 針對 視窗的 放大 與 縮小 ， 執行不同的 method 與 event

這類的需求，其實是非常常見的，像是 scroll 事件中，只針對滾輪在 往上 滾動時，讓隱藏的選單出現於畫面中，就是我們在使用網頁的使用者體驗中，最常見的例子:

作法 ：

此部份我以 resize 事件為範例， 同邏輯 scroll 事件也適用下列方法

範例：

(function($){

    var previousDimensions = {
      width: $(window).width(),
      height: $(window).height()
    }

    $(window).resize(function () {
      var newDimensions = {
        width: $(window).width(),
        height: $(window).height()
      }

      if (newDimensions.width > previousDimensions.width) {

          // resize UP event
          console.log('UP')

       } else {

          // resize Down event
          console.log('DOWN')

       }

      previousDimensions = newDimensions

    })
})(jQuery)

解析：

Step 1 :

建立變數，暫存 當前 屬性質 ， 作為判斷依據

var previousDimensions = {
  width: $(window).width(),
  height: $(window).height()
}

Step 2 :

在 事件(resize) 發生後，建立變數取得 事件後的 屬性質

$(window).resize(function () {
  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }
})

Step 3 :

接著就可以根據前 2 步驟 的參數，進行判斷 視窗的 放大 與 縮小，並執行對應的 事件 與 方法

$(window).resize(function () {

  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }

  if (newDimensions.width > previousDimensions.width) {

      // resize UP event
      console.log('UP')

   } else {

      // resize Down event
      console.log('DOWN')

   }
})

Step 4 :

最後在 事件(resize) 結束後，更新 Step 1 作為判斷依據的參數

$(window).resize(function () {

  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }

  if (newDimensions.width > previousDimensions.width) {

      // resize UP event
      console.log('UP')

   } else {

      // resize Down event
      console.log('DOWN')

   }

  //更新參考依據
   previousDimensions = newDimensions
})

Facebook 功能：