在JavaScript 中實現時間延遲

在Web 開發領域，控制各種事件的時間安排對於創建用戶友好且易於使用的應用程式至關重要。互動體驗。一個常見的要求是引入時間延遲，以防止使用者輸入觸發快速或重複的操作。

具體來說，JavaScript 提供了一種實現時間延遲的通用方法。處理映像時，如所提供的程式碼中的情況，您可以利用 setTimeout() 函數將 JavaScript 程式碼的執行暫停指定的持續時間。

在您的程式碼中，您的目標是創建一個切換行為，其中單擊圖像會將其來源更改為“img_onclick.jpg”，並在恢復為“img.jpg”之前觸發1000 毫秒（1 秒）的延遲。為此，我們引入了 setTimeout() 函數，如下所示：

var delayInMilliseconds = 1000; // Set the desired delay

$(".trigger").click(function() {
  // Code to handle image toggle
  $(this).next(".toggle-container").slideToggle();
  setTimeout(function() {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
  }, delayInMilliseconds);
});

透過將恢復影像來源的程式碼包裝在 setTimeout() 函數中，我們在執行切換操作後創建了一個延遲。這確保了單擊“img_onclick.jpg”圖像時不會立即顯示“img.jpg”圖像。

有關不使用setTimeout()的替代方法，請參閱此問題.