jQuery: 1 Sekunde warten / verzögern, ohne Code auszuführen

129

Ich kann die .delayMethode in jQuery nicht zum Laufen bringen:

$.delay(3000); // not working
$(queue).delay(3000); // not working

Ich verwende eine while-Schleife, um zu warten, bis ein unkontrollierter Änderungswert größer oder gleich einem anderen ist, und ich kann keine Möglichkeit finden, die Ausführung für X Sekunden zu verschieben.

javascript jquery delay wait seconds Brian Graham
quelle
Versuchen Sie, setTimeout im Rückruf zu verwenden
theshadowmonkey
Welche Version von jquery verwenden Sie?
L7ColWinters
1
Dafür ist die Verzögerungsfunktion nicht vorgesehen, sondern für die Verwendung zwischen in der Warteschlange befindlichen Abfrageereignissen (wie fade (). delay (). show ()). Sie benötigen die Funktion setTimeOut.
JoJa
@JoJa: Sie sind im Hauptpunkt korrekt, aber die Form ohne Argument von show (und hide) verwendet nicht die Effektwarteschlange.
Jay Tomten
3
Bitte geben Sie an, was Sie mit der Verzögerung erreichen möchten. Alles JavaScript wird in einem einzelnen Thread ausgeführt, und das Einfrieren für X Sekunden kann zu einer nachteiligen Benutzererfahrung führen.
Dmitry Shkuropatsky

Antworten:

176

$ .delay wird verwendet, um Animationen in einer Warteschlange zu verzögern und nicht die Ausführung anzuhalten.

Anstatt eine while-Schleife zu verwenden, müssen Sie rekursiv eine Methode aufrufen, die die Prüfung jede Sekunde durchführt, indem Sie setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();
Justin Niessner
quelle
1
Ich denke, setTimeout ist genug.
Jiemurat
3
Du bist der Bombenbruder, genau das brauchte ich, um meinen Code zu reparieren.
jemiloii
@Jiemurat und alle anderen in der Zukunft: setTimeout unterbricht den Ausführungsfluss nicht. Der große Code von Niessner erhält dies, bis die Bedingungen wahr werden!
Gabrer
Wenn Sie den Ausführungsfluss nicht unterbrechen müssen, können Sie ihn einfach verwenden setTimeout().
Joshua Pinter
Ich bekomme immer "Check ist keine Funktion", meine Check-Funktion hat jedoch zwei Parameter
Black
211

Sie können einen Vorgang auch folgendermaßen verzögern:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)?
Matt Sich
quelle
7
Nur zu Ihrer Information, dies unterbricht nicht den Ausführungsfluss. Wenn Sie also für ein paar Sekunden "alles stoppen" müssen, brauchen Sie so etwas wie das, was Niessner gepostet hat.
Joshua Pinter
Ja ... es ist ein Rückruf an die Funktion und blockiert nicht. Vielen Dank für die Antwort, es hat mein Problem behoben.
Bertus Kruger
Wenn die Frequenz extrem kurz ist und wir erwarten, dass diese Funktion für immer ausgeführt wird, wird sie dann irgendwann den Stapel sprengen?
Suicide Bunny
16

ES6 setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Bearbeiten: 204586560000 ms ist die ungefähre Zeit zwischen der ursprünglichen Frage und dieser Antwort ... vorausgesetzt, ich habe richtig berechnet.

thedanotto
quelle
2
wirklich schön mit der ungefähren Zeit von der ursprünglichen Frage bis zu dieser Antwort
Fuzzybear
9

Die delayFunktion von jQuery soll für Effekte und Effektwarteschlangen verwendet werden. delayWeitere Informationen finden Sie in den Dokumenten und im Beispiel darin:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Wenn Sie eine Variable auf Änderungen beobachten möchten, können Sie Folgendes tun

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();
Julian D.
quelle
setInterval hat einen zweiten obligatorischen Parameter, die Zeit in Millisekunden;)
sara_thepot
1
Danke @ sara.potyscki, behoben.
Julian D.
@ JulianD. Vielen Dank für diesen Vorschlag. Ich bin auf diese Frage gestoßen, als ich nach einer Lösung gegoogelt habe. Genau das brauchte ich für mein Projekt.
Cheryl Velez
8

JavaScript setTimeoutist eine sehr gute Lösung:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

Die delayFunktion in jQuery wird hauptsächlich zum Verzögern von Animationen in einer jQuery-Animationswarteschlange verwendet.

Jay Tomten
quelle
5

delay()stoppt den Codefluss nicht und führt ihn dann erneut aus. In JavaScript gibt es keine praktische Möglichkeit, dies zu tun. Alles muss mit Funktionen erledigt werden, die Rückrufe annehmen, wie sie setTimeoutandere erwähnt haben.

Der Zweck von jQuery's delay()besteht darin, eine Animationswarteschlange vor der Ausführung warten zu lassen. So wird beispielsweise $(element).delay(3000).fadeIn(250);das Element nach 3 Sekunden eingeblendet.

Nathan MacInnes
quelle
5

Nur Javascript Es funktioniert ohne jQuery 

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>
Faruk Omar
quelle
1
Es ist eine schlechte Idee, in Javascript zu warten! Alle Javascript-Funktionen werden gestoppt, während die Schleife ausgeführt wird. Dies wird unerwartete Nebenwirkungen haben. Es ist viel besser, nicht blockierende Funktionen wie setTimeout () zu verwenden.
Kevin G.
4

Javascript ist eine asynchrone Programmiersprache, sodass Sie die Ausführung für einige Zeit nicht stoppen können. Die einzige Möglichkeit, eine Ausführung [pseudo] zu stoppen, ist die Verwendung von setTimeout (), bei dem es sich nicht um eine Verzögerung, sondern um einen "verzögerten Funktionsrückruf" handelt.

Fabio Buda
quelle
2

Wenn Sie ES6-Funktionen verwenden und sich in einer asynchronen Funktion befinden, können Sie die Codeausführung mit dieser Funktion für eine bestimmte Zeit effektiv anhalten:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

So verwenden Sie es:

await delay(5000);

Es wird für die angeforderte Anzahl von Millisekunden angehalten, jedoch nur, wenn Sie sich in einer asynchronen Funktion befinden . Beispiel unten:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
Anthony De Smet
quelle