jQuery: Attendre / Retarder 1 seconde sans exécuter de code

129

Je ne parviens pas à faire fonctionner la .delayméthode dans jQuery:

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

J'utilise une boucle while pour attendre qu'une valeur changeante incontrôlée soit supérieure ou égale à une autre et je ne trouve aucun moyen de hault l'exécution pendant X secondes.

javascript jquery delay wait seconds Brian Graham
la source
essayez d'utiliser setTimeout dans le rappel
theshadowmonkey
quelle version de jquery utilisez-vous?
L7ColWinters
1
ce n'est pas pour cela que la fonction delay est conçue, elle est conçue pour être utilisée entre les événements jquery en file d'attente (comme fade (). delay (). show ()). Vous avez besoin de la fonction setTimeOut.
JoJa
@JoJa: Vous avez raison sur le point principal, cependant la forme sans argument de show (et hide) n'utilise pas la queue d'effets.
Jay Tomten
3
Veuillez indiquer ce que vous essayez d'accomplir avec le retard. Tout JavaScript s'exécute sur un seul thread et le gel pendant X secondes peut entraîner une expérience utilisateur défavorable.
Dmitry Shkuropatsky

Réponses:

176

$ .delay est utilisé pour retarder les animations dans une file d'attente, pas pour arrêter l'exécution.

Au lieu d'utiliser une boucle while, vous devez appeler de manière récursive une méthode qui effectue la vérification toutes les secondes en utilisant setTimeout:

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

check();
Justin Niessner
la source
1
Je pense que setTimeout suffit.
Jiemurat
3
Tu es le frère de la bombe, c'est exactement ce dont j'avais besoin pour réparer mon code.
jemiloii
@Jiemurat et n'importe qui d'autre dans le futur: setTimeout ne rompt pas le flux d'exécution. Le grand code de Niessner a obtenu cela jusqu'à ce que les conditions deviennent réalité!
Gabrer
Si vous n'avez pas besoin d'interrompre le flux d'exécution, vous pouvez simplement utiliser setTimeout().
Joshua Pinter
je reçois toujours "vérifier n'est pas une fonction", mais ma fonction de vérification a deux paramètres
Noir
210

Vous pouvez également simplement retarder certaines opérations de cette façon:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)?
Matt Sich
la source
7
Juste un FYI, cela n'interrompt pas le flux d'exécution, donc si vous avez besoin de "tout arrêter" pendant quelques secondes, vous allez avoir besoin de quelque chose comme ce que Niessner a publié.
Joshua Pinter
Oui ... c'est un rappel de la fonction et ne bloque pas. Merci pour la réponse, cela a résolu mon problème.
Bertus Kruger
si la fréquence est extrêmement courte et que nous nous attendons à ce que cette fonction fonctionne pour toujours, finira-t-elle par faire exploser la pile?
Suicide Bunny
16

ES6 setTimeout

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

Edit: 204586560000 ms est le temps approximatif entre la question d'origine et cette réponse ... en supposant que j'ai calculé correctement.

thedanotto
la source
2
vraiment sympa en utilisant le temps approximatif entre la question originale et cette réponse
Fuzzybear
9

La delayfonction de jQuery est destinée à être utilisée avec des effets et des files d'attente d'effets, voir la delaydocumentation et l'exemple qui s'y trouve:

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

Si vous souhaitez observer une variable pour les changements, vous pouvez faire quelque chose comme

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();
Julian D.
la source
setInterval a un deuxième paramètre obligatoire, le temps en millisecondes;)
sara_thepot
1
Merci @ sara.potyscki, corrigé.
Julian D.
@JulianD. Merci pour cette suggestion. J'ai atterri sur cette question en cherchant une solution sur Google. C'est exactement ce dont j'avais besoin pour mon projet.
Cheryl Velez
8

JavaScript setTimeoutest une très bonne solution:

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

funcx();

La delayfonction de jQuery est principalement utilisée pour retarder les animations dans une file d'attente d'animation jQuery.

Jay Tomten
la source
5

delay()n'interrompt pas le flux de code puis le réexécute. Il n'y a aucun moyen pratique de le faire en JavaScript. Tout doit être fait avec des fonctions qui acceptent des rappels comme ceux setTimeoutque d'autres ont mentionnés.

Le but de jQuery delay()est de faire attendre une file d'attente d'animation avant de s'exécuter. Ainsi, par exemple $(element).delay(3000).fadeIn(250);, l'élément disparaîtra après 3 secondes.

Nathan MacInnes
la source
5

Seulement javascript Cela fonctionnera sans 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
la source
1
Attendre en boucle en javascript est une mauvaise idée! Toutes les fonctionnalités javascript s'arrêteront pendant l'exécution de la boucle. Cela aura des effets secondaires imprévus. Il est préférable d'utiliser des fonctions non bloquantes comme setTimeout ().
Kevin G.
4

Javascript est un langage de programmation asynchrone donc vous ne pouvez pas arrêter l'exécution pendant un certain temps; la seule façon de [pseudo] arrêter une exécution est d'utiliser setTimeout () qui n'est pas un délai mais un "rappel de fonction retardé".

Fabio Buda
la source
2

Si vous utilisez les fonctionnalités ES6 et que vous êtes dans une fonction asynchrone, vous pouvez effectivement arrêter l'exécution du code pendant un certain temps avec cette fonction:

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

Voici comment vous l'utilisez:

await delay(5000);

Il bloquera pendant la quantité demandée de millisecondes, mais uniquement si vous êtes dans une fonction asynchrone . Exemple ci-dessous:

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
la source