如何在 JavaScript 中針對特定用例實作指定的時間延遲？

在JavaScript 中實現時間延遲

在某些情況下，有必要在腳本執行中添加延遲以增強用戶界面或效能最佳化.在這種情況下，我們將探索如何在 JavaScript 中引入時間延遲來解決特定的用例。

用例：

假設您有圖像切換功能單擊圖像會將其切換為不同的圖像，再次單擊時，它將恢復為原始圖像。為了增強使用者體驗，您希望在點擊第二個圖片 (img_onclick.jpg) 後重新出現初始圖片 (img.jpg) 之前新增 1 秒的延遲。

解決方案：

setTimeout() 函數提供了一種在 JavaScript 中引入延遲的通用方法。其語法為：

setTimeout(function, milliseconds)

在此解決方案中，我們將利用 setTimeout() 在恢復到原始影像 img.jpg 之前建立 1000 毫秒（1 秒）的延遲。以下是修改後的程式碼：

<code class="javascript">$(".trigger").toggle(function () {
    $(this).addClass("active");
    $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
    $(this).removeClass("active");
    // Added setTimeout to introduce a delay
    setTimeout(function() {
      $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, 1000); // 1000 milliseconds delay
});</code>

透過合併此更改，當點擊第二個圖片(img_onclick.jpg) 時，腳本將等待1 秒，然後再有效地顯示原始圖片(img .jpg)根據需要添加延遲。

請注意，還有其他方法可以實現類似的結果，但對於這個特定的用例，setTimeout() 提供了一個簡單而高效的解決方案。

以上是如何在 JavaScript 中針對特定用例實作指定的時間延遲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！