données montrent avec retard de jquery chaque boucle

Question

Ma question est la suivante:

Quelle est la meilleure façon pour boucler une série de JSON aussi montrer des données avec comme un deuxième retard.

Celui ci-dessous ne fonctionne pas, car il montre qu'un seul message, une fois au lieu de 4

jQuery.each(data.user, function(index, itemData) { 


    timerid = setTimeout(function(){showMessage(itemData);}, 1000); 
                 }); 

function showMessage(message){ 
    $('#status_info').html(message); 
    clearTimeout(timerid); 
} 

merci, Richard

Answer 1

Si vous voulez éviter un setInterval et juste lié les appels à la longueur de votre liste, vous pouvez créer une fonction auto-exécutable qui enregistre votre index actuel au lieu d'utiliser celui de la fermeture. La variable de la fermeture finira toujours par être le dernier élément de votre boucle, puisque la boucle finira longtemps avant que la variable de votre fonction setTimeout ne soit lue. Vous appelez également la fonction clearTimeout, ce qui ne me semble pas très logique dans ce contexte.

En plus de cela, tous vos setTimeouts vont être appelés presque en même temps. Cela aurait pour résultat que toutes les valeurs clignotent sur l'écran en millisecondes (ou trop vite pour voir dans certains cas). Une boucle n'est pas vraiment appropriée ici, car la fonction setTimeout est asynchrone. Un système de callbacks est meilleur pour un nombre fini d'exécutions, et un système setInterval est meilleur pour un nombre inconnu d'exécutions. Pour moi, votre nombre d'exécutions devrait être le nombre d'éléments dans votre objet jQuery (ceux qui sont actuellement en cours de $ .each())

Je suggère que vous fassiez quelque chose comme l'exemple généralisé suivant de votre question (généralisé puisque je n'ai pas accès à votre dom).

function showMessage(message){ 
    $('body').html(message); 
} 

var itemData = [1,2,3,4]; 

var i = 0; 

function idTimer(list, i) { 
    if (!(i >= 0)) { 
    i= 0; 
    } 
    setTimeout((function(msg){ 
    i++; 
    return function(){ 
     if(i < list.length){ 
     idTimer(list, i); 
     } 
     showMessage(msg); 
    } 
    })(list[i]), 1000); 
} 

idTimer(itemData); 

Une démonstration en direct de ce code peut être trouvé à: http://jsbin.com/ifuqo

Answer 2

Essayez setInterval à la place:

var i = 0; 
window.setInterval(function() { 
    $('#status_info').html(data.user[i++]); 
    i = i == data.user.length ? 0 : i; // loops the interval 
}, 1000);