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