Реализация задержки времени в JavaScript

В сфере веб-разработки контроль времени различных событий имеет решающее значение для создания удобных для пользователя и интерактивный опыт. Одним из распространенных требований является введение временной задержки для предотвращения быстрых или повторяющихся действий, вызванных вводом пользователя.

В частности, JavaScript предоставляет универсальный метод достижения временных задержек. При работе с изображениями, как в приведенном коде, вы можете использовать функцию setTimeout() для приостановки выполнения кода JavaScript на указанный период времени.

В вашем коде вы стремитесь создать поведение переключения, при котором щелчок по изображению меняет его источник на «img_onclick.jpg» и запускает задержку в 1000 миллисекунд (1 секунду), прежде чем вернуться обратно к «img.jpg». Для этого мы вводим функцию 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.jpg» не будет отображаться сразу после щелчка по изображению «img_onclick.jpg».

Для альтернативного подхода без использования setTimeout() обратитесь к этому вопросу. .