élément de mise à jour en utilisant jQuery .each()

Question

Code HTML:

div id="updatePanel">​

Code jQuery:

var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 

$.each(data, function(index, value) { 
    setTimeout(function(){ 
    $('#updatePanel').text(index);  
    }, 5000); 
}); 

Je veux que le contenu UpdatePanel div à être mis à jour toutes les 5 secondes. Il devrait être 1 puis attendre 5 secondes, afficher 2, attendre encore 5 secondes ......

Cela ne fonctionne pas comme prévu. Il attend pendant 5 secondes et l'affichage 9.

Voir la démo ici: http://jsfiddle.net/vc7qB/4/

Answer 1

Modifier le }, 5000);-}, 5000*index);

Cela fera chaque élément d'attendre 5 secondes de plus que la précédente ...

Gardez à l'esprit que tous les délais d'attente sont créées en même temps, mais avec des temps de retard ..

Il serait préférable de commencer par une simple délai d'attente et à chaque exécution de créer le prochain ..

comme celui-ci

var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

    function update(idx){ 
     setTimeout(function(){ 
     $('#updatePanel').text(data[idx]); 
     if (idx < data.length - 1) 
      update(idx+1); 
     },1000); 
    } 

update(0);