So erstellen Sie Zeitverzögerungen in JavaScript für den Bildzyklus: Ein praktisches Beispiel

So implementieren Sie Zeitverzögerungen in JavaScript

Als Webentwickler ist es aus verschiedenen Gründen oft notwendig, Zeitverzögerungen in Ihren Code zu integrieren. Ein solches Szenario umfasst das Wechseln zwischen Bildern auf Ihrer Website, wobei Sie eine Verzögerung zwischen den Klicks wünschen, um einen schnellen Bildwechsel zu verhindern.

In diesem speziellen Fall möchten Sie eine Verzögerung von 1000 ms (1 Sekunde) nach dem Klicken auf ein implementieren Bild, um img_onclick.jpg anzuzeigen, gefolgt von einer Verzögerung, bevor bei einem zweiten Klick wieder zu img.jpg zurückgekehrt wird. Um dies zu erreichen, sollten Sie die JavaScript-Funktion setTimeout() verwenden.

Lösung mit 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>

In dieser Lösung verwenden wir setTimeout() um eine Callback-Funktion zu planen, die nach einer Verzögerung von 1000 ms wieder zu img.jpg wechselt.

Alternative Lösung ohne setTimeout()

Während setTimeout() ein gängiger Ansatz ist, ist es erwähnenswert, dass es eine andere Lösung gibt, die die Verwendung der JavaScript-Ereignisschleife und eines async/await-Konstrukts beinhaltet. Dieser Ansatz ist jedoch komplexer und fällt nicht in den Rahmen dieser Diskussion. Als Referenz finden Sie weitere Informationen zu dieser Alternative in der bereitgestellten Frage im Abschnitt „Wenn Sie es ohne setTimeout tun möchten“.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Zeitverzögerungen in JavaScript für den Bildzyklus: Ein praktisches Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!