如何在 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中文网其他相关文章！