如何僅在大小調整完成時呼叫JQuery的RESIZE事件？

大小調整完成時使用JQuery呼叫RESIZE事件

在開發響應式應用程式時，經常需要追蹤瀏覽器視窗大小的變化來調整大小對應的使用者介面。但是，在手動調整視窗大小時連續呼叫調整大小函數可能會導致函數呼叫過多。

為了解決這個問題，JQuery 提供了一種方法，僅在視窗完成調整大小後呼叫一次調整大小函數。

使用 setTimeout() 的解決方案

在 JQuery 的調整大小事件監聽器中，使用setTimeout() 函數以指定的延遲呼叫所需的操作。這確保了僅在調整大小停止後調用該函數。

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 300);
});

$(window).on('resizeEnd', function() {
  // Code to be executed after resizing is complete
});

在此解決方案中，在 300 毫秒延遲後觸發 resizeEnd 自訂事件，保證它僅在調整大小完成後發生。

使用 setInterval() 的其他解

或者，您可以使用 setInterval() 連續檢查視窗大小是否有變更。當大小在指定時間內保持穩定時，會呼叫 resize 函數。

var resizeInterval;
window.onresize = function() {
  if (resizeInterval) clearInterval(resizeInterval);
  resizeInterval = setInterval(function() {
    if (window.innerWidth == previousWidth && window.innerHeight == previousHeight) {
      clearInterval(resizeInterval);
      // Code to be executed after resizing is complete
    }
  }, 300);
  previousWidth = window.innerWidth;
  previousHeight = window.innerHeight;
};

在這兩種解決方案中，都可以根據應用程式的要求調整延遲值。

以上是如何僅在大小調整完成時呼叫JQuery的RESIZE事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！