如何在 JavaScript 中建立圖像循環的時間延遲：一個實際範例

如何在 JavaScript 中實現時間延遲

作為 Web 開發人員，出於各種目的，通常需要將時間延遲合併到程式碼中。其中一個場景涉及在網站上的圖像之間進行切換，您希望在單擊之間有一個延遲，以防止圖像快速循環。

在這種特定情況下，您的目標是在點擊某個影像後實現 1000 毫秒（1 秒）的延遲。圖像來展示 img_onclick.jpg，然後在第二次點擊時恢復到 img.jpg 之前出現延遲。要實現此目的，請考慮使用 JavaScript 的 setTimeout() 函數。

使用setTimeout() 的解

<code class="javascript">var delayInMilliseconds = 1000; //1 second

$(".trigger").click(function () {
    $(this).next(".toggle-container").slideToggle();
    
    // Schedule a callback to switch back to img.jpg after 1 second
    setTimeout(function() {
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, delayInMilliseconds);
});</code>

在此解中，我們利用setTimeout() 安排回呼函數，在延遲1000 毫秒後切換回img.jpg。

不使用setTimeout() 的替代解決方案

雖然setTimeout() 是一種常見方法，但值得一提的是，還有另一種解決方案，涉及使用JavaScript 事件循環和async/await 構造。然而，這種方法更為複雜，不屬於本討論的範圍。作為參考，您可以在「如果您想在沒有 setTimeout 的情況下執行此操作」部分下提供的問題中找到有關此替代方案的更多資訊。

以上是如何在 JavaScript 中建立圖像循環的時間延遲：一個實際範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！