如何在視窗大小調整完成後僅執行一次 $(window).resize() ？

目標事件完成：$(window).resize() 執行後

使用$(window).resize(function() { ... }) 時為了監視瀏覽器視窗大小的調整，您可能會在手動視窗調整期間遇到多個事件觸發。當每次拖曳視窗邊框時都會觸發事件，從而導致出現不良行為時，就會出現此問題。為了解決這個問題，讓我們探索一種解決方案，確保僅在調整大小過程完成後執行。

下面的程式碼片段提供了一個實用的解決方案，可以在程式碼的各個部分使用：

<code class="javascript">var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();</code>

要利用此解決方案，請按照以下步驟操作：

1. 實作用於調整視窗大小的自訂事件偵聽器。

<code class="javascript">$(window).resize(function () {</code>

2. 在事件偵聽器內，呼叫 waitForFinalEvent 設定回呼逾時。

<code class="javascript">    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");</code>

500 參數表示延遲 500 毫秒，以便有足夠的時間完成調整大小過程。 uniqueId 參數確保多個回呼可以利用相同的逾時機製而不會相互幹擾。

此修改後的解決方案可讓您定義在視窗大小調整完成後執行的多個回調，有效地滿足程式碼的各個部分。

以上是如何在視窗大小調整完成後僅執行一次 $(window).resize() ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！