JavaScript setInterval et setTimeout

Question

Le code suivant affiche la date toutes les 1 s, puis s'arrête.

(function() { 
    var i = setInterval(function() { 
     console.log(new Date()); 
    }, 1000); 
    console.log("Hi"); 

    setTimeout(function() { 
     clearInterval(i); 
    }, 3000); 
    console.log("Hola"); 
})(); 

Sortie:

Hi 
Hola 
Wed Oct 24 2012 13:35:27 GMT+0200 (CEST) 
Wed Oct 24 2012 13:35:28 GMT+0200 (CEST) 
Wed Oct 24 2012 13:35:29 GMT+0200 (CEST) 

Mais je ne sais pas pourquoi Hi et Hola sont affichés en premier. En outre, pourquoi setTimeout est exécuté? Il n'est pas supposé que setInterval est exécuté toutes les secondes et rien d'autre ne peut être exécuté? (Est-ce que le code ci-dessus s'exécute dans l'ordre dans lequel il est écrit?) Merci.

Answer 1

setTimeout ainsi que setInterval enregistrent uniquement les fonctions (callbacks) mais aller directement à la commande suivante.

Par conséquent Hi et Hola sont imprimés avant que les premiers rappels soient appelés.

rappel premier sera celui de setInterval après 1 sec, puis de nouveau après 2 sec .. Après 3 secondes setTimeout coups de pied dans et efface setInterval.

Answer 2

Tout sur setTimeout() et setInterval() est quand même exécuté. Ce n'est pas la méthode sleep() de PHP ... malheureusement!

Cependant, ce lien pourrait être utile: http://www.phpied.com/sleep-in-javascript/

Answer 3

http://ejohn.org/blog/how-javascript-timers-work/

Ces deux événements sont asynchrones. Ils sont mis en file d'attente/exécutés au moment disponible suivant, pas à l'heure exacte où "setTimeout" ou "setInterval" est appelé.

Answer 4

Les commentaires montrent l'ordre d'exécution

(function() {       // 0 anonymous function is called inline 

    var i = setInterval(function() { // 1 setInterval **schedules** the function 
             //  parameter to be executed every second 
     console.log(new Date()); 
    }, 1000); 
    console.log("Hi");     // 2 Display 'Hi' on console 

    setTimeout(function() {    // 3 **Schedule** the function parameter to 
             //  execute after three seconds 
     clearInterval(i);  
    }, 3000); 
    console.log("Hola");    // 4 Display 'Hola' on console 
})(); 

             // 5 Display date from setInterval function 

             // 6 Display date from setInterval function 

             // 7 Display date from setInterval function 

             // 8 Cancel setInterval executed from 
             //  setTimeout function 

Hope cela éclaircit votre confusion.