Exécuter le script après un délai spécifique en utilisant JavaScript

Juste pour ajouter à ce que tous les autres ont dit à propos de setTimeout : Si vous voulez appeler une fonction avec un paramètre dans l'avenir, vous devez configurer l'anonymat des appels de fonction.

vous devez passer la fonction comme argument pour qu'elle soit appelée plus tard. En effet, cela signifie sans parenthèses derrière le nom. Le suivant appellera l'alerte immédiatement, et il affichera 'Hello world':

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

pour corriger ceci vous pouvez mettre le nom d'une fonction (comme Flubba a fait) ou vous pouvez utiliser une fonction anonyme. Si vous devez passer un paramètre, vous devez utiliser une fonction anonyme.

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

mais si vous lancez ce code, vous remarquerez qu'après 2 secondes le popup dira 'Hello Stack Overflow'. C'est parce que la valeur de la variable a changé au cours de ces deux secondes. Pour qu'il dise "Hello world" après deux secondes, vous devez utiliser le 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 popup 'Hello world'.

pour un petit agrandissement... Vous pouvez exécuter le code directement dans l'appel setTimeout , mais comme @patrick dit, vous assignez normalement une fonction de rappel, comme ceci. The time is millisecondes

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

si vous voulez vraiment avoir une fonction de blocage (synchrone) delay (pour quelque chose), 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>

vous devez utiliser setTimeout et passer une fonction de rappel. La raison pour laquelle vous ne pouvez pas utiliser sleep en javascript est que vous bloqueriez la page entière de faire quoi que ce soit dans l'intervalle. Pas un bon plan. Utilisez le modèle d'événement Javascript et soyez heureux. Ne vous battez pas!

vous pouvez aussi utiliser la fenêtre .setInterval () pour exécuter du code à répétition à un intervalle régulier.

pour ajouter sur les commentaires précédents, je voudrais dire ce qui suit:

la fonction setTimeout() de JavaScript n'interrompt pas l'exécution du script en soi, mais indique simplement au compilateur d'exécuter le code dans le futur.

il n'y a pas de fonction qui puisse réellement interrompre l'exécution intégrée dans JavaScript. Cependant, vous pouvez écrire votre propre fonction qui fait quelque chose comme une boucle inconditionnelle jusqu'à ce que le temps soit atteint par en utilisant la fonction Date() et en ajoutant l'intervalle de temps dont vous avez besoin.

si vous n'avez besoin que de tester un delay, vous pouvez utiliser ceci:

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

et puis si vous voulez retarder de 2 secondes vous faites:

delay(2000);

Pourrait ne pas être le meilleur pour la production. En savoir plus sur cela dans les commentaires

la réponse simple est:

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

la fonction ci-dessus attend 1 seconde (1000 ms) puis place x à 1. Évidemment, c'est un exemple; vous pouvez faire tout ce que vous voulez dans la fonction anonymous.

pourquoi ne pas mettre le code derrière une promesse? (tapé sur le dessus de ma tête)

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

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

dans mon code, je veux automatiquement naviguer à la page précédente à la fin D'un événement de sauvegarde AJAX. L'achèvement de l'événement de sauvegarde a une légère animation dans le CSS indiquant que la sauvegarde a été réussie.

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 temps mort--l'arrière() s'appelle presque immédiatement peu importe le nombre que je mets pour le retard.

changer pour:

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

ça fait exactement ce que j'espérais.

ce n'est pas spécifique à l'opération back (), la même chose se produit avec alert() . Essentiellement avec le alert() utilisé dans le premier cas, le délai est ignoré. Quand je rejette le popup le l'animation pour la CSS continue.

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

j'ai eu quelques commandes ajax que je voulais exécuter avec un délai entre les deux. Voici un exemple simple d'un moyen de le faire. 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

comme d'autres dit, setTimeout est votre pari le plus sûr

Mais parfois vous ne pouvez pas séparer la logique d'une nouvelle fonction, alors vous pouvez utiliser Date.maintenant() pour obtenir millisecondes et faire 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());