zeigen die Daten mit einer Verzögerung von jeder Schleife jquery

Question

Meine Frage ist folgende:

Was ist der beste Weg, um einige Json-Array für Looping einige Daten zu zeigen, mit wie eine Verzögerung von einer Sekunde.

Die unter nicht funktioniert, weil es nur eine zeigt Nachricht einmal anstelle von 4

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


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

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

Dank Richard

Answer 1

Wenn Sie eine setInterval vermeiden wollen und nur die Anrufe auf die Länge der Liste gebunden, können Sie eine selbstausführende Funktion erstellen, die Ihren aktuellen Index speichert stattdessen die eine von der Schließung der Verwendung. Die Variable aus der Schließung wird am Ende immer das letzte Element ist in Ihrer jede Schleife, da die Schleife lange beenden wird, bevor die Variable in der setTimeout-Funktion gelesen wird.

Sie sind auch die clear Funktion aufrufen, die eine ganze Menge Sinn für mich nicht in diesem Zusammenhang machen.

Hinzu kommt, dass alle Ihre setTimeouts gehen fast zur gleichen Zeit aufgerufen werden. Dies würde in allen Werten auf dem Bildschirm Millisekunden blinken auseinander (oder zu schnell in einigen Fällen zu sehen). Eine Schleife wird hier nicht wirklich angebracht, weil die setTimeout-Funktion asynchron ist. Ein System von Callbacks ist am besten für eine endliche Anzahl von Durchläufen, und ein setInterval System ist am besten für eine unbekannte Menge von Läufen. Für mich die Anzahl der Durchläufe sollte die Anzahl der Elemente in Ihrem jQuery-Objekt sein (diejenigen, die zur Zeit gehen durch Ihre $ .each werden ())

Ich würde vorschlagen, dass Sie so etwas wie die folgenden verallgemeinerten Beispiel Ihrer Frage zu tun (verallgemeinert, da ich keinen Zugriff auf Ihre dom haben).

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);

Eine Live-Demo von diesem Code finden Sie unter: http://jsbin.com/ifuqo

Answer 2

Versuchen

setInterval statt:

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