在 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()的替代方法，请参阅此问题.