Exécuter le script après un délai spécifique à l'aide de JavaScript

Question

Existe-t-il une méthode JavaScript similaire à jQuery delay() ou wait() (pour retarder l'exécution d'un script pendant une durée déterminée) ?

Answer 1

Il y a ce qui suit :

setTimeout(function, milliseconds);

fonction qui peut être dépassée le temps après lequel la fonction sera exécutée.

Voir: Fenêtre setTimeout() Méthode.

Answer 2

Juste pour ajouter à ce que tout le monde a dit setTimeout:Si vous souhaitez appeler une fonction avec un paramètre à l'avenir, vous devez configurer des appels de fonction anonymes.

Vous devez passer la fonction comme argument pour qu'elle soit appelée ultérieurement.En fait, cela signifie sans parenthèses derrière le nom.Les éléments suivants appelleront l'alerte immédiatement et afficheront « Bonjour tout le monde » :

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Pour résoudre ce problème, vous pouvez soit mettre le nom d'une fonction (comme Flubba l'a fait), soit utiliser une fonction anonyme.Si vous devez transmettre un paramètre, vous devez alors utiliser une fonction anonyme.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Mais si vous exécutez ce code, vous remarquerez qu'après 2 secondes, la fenêtre contextuelle dira « Bonjour Stack Overflow ».En effet, la valeur de la variable a a changé au cours de ces deux secondes.Pour qu'il dise « Bonjour tout le monde » après deux secondes, vous devez utiliser l'extrait de code suivant :

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Il attendra 2 secondes, puis apparaîtra « Bonjour tout le monde ».

Answer 3

Juste pour développer un peu...Vous pouvez exécuter du code directement dans le setTimeout appeler, mais comme @patrick dit, vous attribuez normalement une fonction de rappel, comme celle-ci.Le temps est en millisecondes

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Answer 4

Si vous voulez vraiment avoir un blocage (synchrone) delay fonction (pour quoi que ce soit), pourquoi ne pas faire quelque chose comme ceci :

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Answer 5

Vous devez utiliser setTimeout et transmettez-lui une fonction de rappel.La raison pour laquelle vous ne pouvez pas utiliser sleep en javascript est que vous empêcheriez toute la page de faire quoi que ce soit entre-temps.Ce n'est pas un bon plan.Utilisez le modèle d'événement Javascript et restez satisfait.Ne le combattez pas !

Answer 6

Vous pouvez aussi utiliser fenêtre.setInterval() pour exécuter du code à plusieurs reprises à intervalle régulier.

Answer 7

Pour compléter les commentaires précédents, je voudrais dire ce qui suit :

Le setTimeout() La fonction en JavaScript ne suspend pas l'exécution du script en soi, mais indique simplement au compilateur d'exécuter le code dans le futur.

Il n’existe aucune fonction intégrée à JavaScript qui puisse réellement suspendre l’exécution.Cependant, vous pouvez écrire votre propre fonction qui fait quelque chose comme une boucle inconditionnelle jusqu'à ce que l'heure soit atteinte en utilisant le Date() fonction et en ajoutant l'intervalle de temps dont vous avez besoin.

Answer 8

Si vous avez seulement besoin de tester un délai, vous pouvez utiliser ceci :

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

Et puis si vous voulez attendre 2 secondes, vous faites :

delay(2000);

Ce n’est peut-être pas le meilleur pour la production.Plus d'informations à ce sujet dans les commentaires

Answer 9

pourquoi ne pouvez-vous pas mettre le code derrière une promesse ?(tapé du haut de ma tête)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Answer 10

La réponse simple est :

setTimeout(
    function () {
        x = 1;
    }, 1000);

La fonction ci-dessus attend 1 seconde (1 000 ms) puis définit x sur 1.Il s'agit évidemment d'un exemple ;vous pouvez faire tout ce que vous voulez dans la fonction anonyme.

Answer 11

J'ai vraiment aimé l'explication de Maurius (réponse la plus votée) avec les trois méthodes différentes pour appeler setTimeout.

Dans mon code, je souhaite naviguer automatiquement vers la page précédente à la fin d'un événement de sauvegarde AJAX.La fin de l'événement de sauvegarde présente une légère animation dans le CSS indiquant que la sauvegarde a réussi.

Dans mon code, j'ai trouvé une différence entre les deux premiers exemples :

setTimeout(window.history.back(), 3000);

Celui-ci n'attend pas le délai d'attente : le back() est appelé presque immédiatement, quel que soit le nombre que j'ai saisi pour le délai.

Cependant, en changeant ceci par :

setTimeout(function() {window.history.back()}, 3000);

Cela fait exactement ce que j'espérais.

Ceci n'est pas spécifique à l'opération back(), la même chose se produit avec alert().En gros avec le alert() utilisé dans le premier cas, le temps de retard est ignoré.Lorsque je ferme la fenêtre contextuelle, l'animation du CSS continue.

Ainsi, je recommanderais la deuxième ou la troisième méthode qu’il décrit même si vous utilisez des fonctions intégrées et n’utilisez pas d’arguments.

Answer 12

J'avais quelques commandes ajax que je voulais exécuter avec un délai entre les deux.Voici un exemple simple d’une façon de procéder.Je suis prêt à être déchiqueté pour mon approche non conventionnelle.:)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Vous pouvez copier le bloc de code et le coller dans une fenêtre de console et voir quelque chose comme :

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Answer 13

La solution la plus simple pour appeler votre fonction avec délai est :

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

Answer 14

Comme d'autres l'ont dit, setTimeout est votre pari le plus sûr
Mais parfois, vous ne pouvez pas séparer la logique d'une nouvelle fonction, vous pouvez alors utiliser Date.now() pour obtenir des millisecondes et effectuer le retard vous-même....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click ok....');
delay(5000);
alert('im back ' +new Date());