Implementieren einer Zeitverzögerung in JavaScript

Im Bereich der Webentwicklung ist die Kontrolle des Timings verschiedener Ereignisse entscheidend für die Erstellung benutzerfreundlicher und interaktive Erlebnisse. Eine häufige Anforderung ist die Einführung einer Zeitverzögerung, um schnelle oder sich wiederholende Aktionen zu verhindern, die durch Benutzereingaben ausgelöst werden.

Insbesondere bietet JavaScript eine vielseitige Methode, um Zeitverzögerungen zu erreichen. Wenn Sie mit Bildern arbeiten, wie es im bereitgestellten Code der Fall ist, können Sie die Funktion setTimeout() verwenden, um die Ausführung von JavaScript-Code für eine bestimmte Dauer anzuhalten.

In Ihrem Code Sie möchten ein Umschaltverhalten erstellen, bei dem durch Klicken auf ein Bild dessen Quelle in „img_onclick.jpg“ geändert wird und eine Verzögerung von 1000 Millisekunden (1 Sekunde) ausgelöst wird, bevor wieder auf „img.jpg“ zurückgekehrt wird. Um dies zu erreichen, führen wir die Funktion setTimeout() wie folgt ein:

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);
});

Indem wir den Code, der die Bildquelle zurücksetzt, in die Funktion setTimeout() einschließen, erzeugen wir eine Verzögerung, nachdem der Umschaltvorgang ausgeführt wurde. Dadurch wird sichergestellt, dass das Bild „img.jpg“ nicht sofort angezeigt wird, wenn auf das Bild „img_onclick.jpg“ geklickt wird.

Eine alternative Vorgehensweise ohne Verwendung von setTimeout() finden Sie in dieser Frage .