如何僅在調整大小操作完成後執行操作？

等待「resize」事件的「End」以實現最佳操作執行

在事件驅動程式設計中，處理大小是很常見的使用“resize”事件進行更改，通常分配給視窗或其他可調整大小的元素。但是，當發生調整大小操作時，在此過程中會多次觸發「resize」事件，從而導致事件處理程序的冗餘執行。

捕獲「resize」事件的「End」

為了解決這個問題並僅在調整大小結束時執行操作，我們可以採用一種涉及使用「setTimeout ()」和「clearTimeout()」的技術。

解決方案：

建立一個函數“resizedw()”，它將作為調整大小操作的事件處理程序。

function resizedw() {
  // Your action to be performed when resizing finishes
}

宣告一個變量， 'doit'，並將其初始化為'null'。該變數將保存 'setTimeout()' 傳回的超時 ID。

var doit = null;

將事件偵聽器附加到 'window' 物件的 'onresize' 事件。

window.onresize = function() {

使用「clearTimeout()」取消與「doit」變數相關的任何待處理逾時請求。

  clearTimeout(doit);

將「setTimeout()」的結果指派給「doit」變數。這將安排在延遲 100 毫秒後執行 'resizedw()'。

  doit = setTimeout(resizedw, 100);
};

當調整大小操作結束時，將呼叫 'onresize' 事件處理程序，而不會立即觸發 'resizedw()' 。在指定的延遲（100 毫秒）後，'resizedw()' 將執行，標誌著調整大小過程完成。

範例程式碼：

以下程式碼示範此方法的實作：

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

var doit = null;
window.onresize = function() {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

此解決方案透過防止在調整大小過程中執行相關操作來有效處理「調整大小」事件。相反，僅在調整大小操作完全結束後才會觸發該操作。

以上是如何僅在調整大小操作完成後執行操作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！