如何在 JavaScript/jQuery 中偵測準確的視窗大小調整事件？

在JavaScript/jQuery 中偵測準確的視窗大小調整事件

當使用$(window).resize常見的是在手動調整大小期間遇到多個事件觸發。當您需要在調整大小完成後才執行程式碼時，這可能會出現問題。

解決方案：

為了解決這個問題，我們可以使用waitForFinalEvent 函數：

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

此函數確保回調僅在最後一個調整大小事件之後的指定延遲（預設為500 毫秒）後執行。 uniqueId 參數允許使用多個回呼而不會發生衝突。

用法：

要使用此功能，您可以修改程式碼如下：

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

透過實作此解決方案，您可以確保您的程式碼準確回應視窗調整大小事件，僅在調整大小完成後執行。

以上是如何在 JavaScript/jQuery 中偵測準確的視窗大小調整事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！