如何防止多次 $(window).resize 事件觸發？

使用$(window).resize 解決多個Resize 事件觸發問題

在Web 開發中，使用$(window).resize 事件操作瀏覽器視窗大小可以觸發多次射擊。為了解決這個問題，我們探索了一種僅在調整大小操作完成後才執行函數的解決方案。

解決方案：

在瀏覽器視窗調整大小後呼叫函數是完成後，我們可以使用 waitForFinalEvent 函數。此函數採用回呼函數、毫秒延遲和唯一識別碼作為參數。此函數會根據延遲設定回呼逾時，但它還會檢查是否存在具有相同唯一 ID 的先前逾時。如果是，則取消先前的逾時並設定新的逾時。

實作：

<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>

用法：

在程式碼中實作waitForFinalEvent 函數，如下所示：

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

透過為每個回呼提供唯一的ID，此實作可確保單獨的回呼不會幹擾彼此的逾時事件。因此，函數只會在調整大小操作完成後執行，從而防止多次觸發。

以上是如何防止多次 $(window).resize 事件觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！