Ich habe dieses ein Stück von js in meiner Website, um Bilder zu wechseln, aber brauchen eine Verzögerung, wenn Sie das Bild ein zweites Mal klicken. Die Verzögerung sollte 1000ms sein. Sie würden also auf das img.jpg klicken, dann würde das img_onclick.jpg erscheinen. Wenn man dann auf das img_onclick.jpg Bild klickt, sollte es eine Verzögerung von 1000ms geben, bevor das img.jpg wieder angezeigt wird.
Hier ist der Code:
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
Verwenden Sie setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Wenn Sie es ohne setTimeout
machen wollen: Beziehen Sie sich auf diese Frage.
setTimeout(function(){
}, 500);
Platzieren Sie Ihren Code innerhalb der { }
500" = 0,5 Sekunden
2200" = 2,2 Sekunden
usw.
Es gibt zwei (meist verwendeten) Arten von Timer-Funktion in Javascript setTimeout
und setInterval
(andere)
Diese beiden Methoden haben die gleiche Signatur. Sie nehmen einen Rückruf-Funktion und Verzögerung Zeit als Parameter.
setTimeout
wird nur einmal nach der Verzögerung ausgeführt, während setInterval
die Rückruffunktion nach jeder Verzögerung in Millisekunden aufruft.
Beide Methoden geben einen Integer-Identifikator zurück, der verwendet werden kann, um sie zu löschen, bevor der Timer abläuft.
clearTimeout
und clearInterval
beide Methoden nehmen einen Integer-Identifikator, der von den obigen Funktionen setTimeout
und setInterval
zurückgegeben wird
Beispiel:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Wenn Sie den obigen Code ausführen, werden Sie sehen, dass er vor setTimeout
und dann nach setTimeout
schließlich Ich bin setTimeout
nach 1sec (1000ms) alarmiert
Wie Sie aus dem Beispiel ersehen können, ist "setTimeout(...)" asynchron, d.h. es wird nicht gewartet, bis der Timer abgelaufen ist, bevor die nächste Anweisung erfolgt, d.h. "alert("after setTimeout")".
Beispiel:
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Wenn Sie den obigen Code ausführen, werden Sie sehen, dass er vor setInterval
und dann nach setInterval
schließlich Ich bin setInterval
5 Mal nach 1 Sekunde (1000ms) meldet, weil setTimeout den Timer nach 5 Sekunden löscht oder Sie sonst alle 1 Sekunde die Meldung Ich bin setInterval
Unendlich erhalten.
Wie macht der Browser das intern?
Ich werde es kurz erklären.
Um das zu verstehen, müssen Sie etwas über die Ereigniswarteschlange in Javascript wissen. Es gibt eine Ereignis-Warteschlange im Browser implementiert. Wann immer ein Ereignis in Javascript ausgelöst wird, werden alle diese Ereignisse (wie Klick usw.) zu dieser Warteschlange hinzugefügt. Wenn Ihr Browser nichts auszuführen hat, nimmt er ein Ereignis aus der Warteschlange und führt es eins nach dem anderen aus.
Wenn Sie nun setTimeout
oder setInterval
aufrufen, wird Ihr Callback zu einem Timer im Browser registriert und nach Ablauf der angegebenen Zeit zur Ereignis-Warteschlange hinzugefügt und schließlich nimmt Javascript das Ereignis aus der Warteschlange und führt es aus.
Dies geschieht so, weil Javascript-Engine sind single threaded und sie können nur eine Sache zu einer Zeit ausführen. Sie können also kein anderes Javascript ausführen und Ihren Timer im Auge behalten. Das ist, warum diese Timer mit Browser registriert sind (Browser sind nicht Single-Thread) und es kann verfolgen Timer und fügen Sie ein Ereignis in der Warteschlange, nachdem der Timer abläuft.
dasselbe geschieht für setInterval
nur in diesem Fall wird das Ereignis in die Warteschlange wieder und wieder nach dem angegebenen Intervall hinzugefügt, bis es gelöscht wird oder Browser-Seite aktualisiert.
Note
Der Delay-Parameter, den Sie an diese Funktionen übergeben, ist die minimale Verzögerung Zeit für die Ausführung des Rückrufs. Das liegt daran, dass nach Ablauf des Timers der Browser fügt das Ereignis in die Warteschlange zur Ausführung durch die javascript engine aber die Ausführung des Rückrufs hängt von Ihrer Ereignisse Position in der Warteschlange und wie der Motor ist single threaded es wird alle Ereignisse in der Warteschlange eine nach der anderen ausführen.
Daher kann Ihr Callback manchmal mehr als die angegebene Verzögerungszeit, um speziell aufgerufen werden, wenn Ihr anderer Code blockiert den Thread und nicht geben ihm Zeit, um zu verarbeiten, was in der Warteschlange ist.
Und wie ich erwähnt Javascript ist Single-Thread. Also, wenn Sie den Thread für lange blockieren.
Wie dieser Code
while(true) { //infinite loop
}
Ihr Benutzer erhält möglicherweise die Meldung Seite antwortet nicht.