mostrar los datos con retraso desde jquery cada bucle

Question

Mi pregunta es la siguiente:

¿Cuál es la mejor manera para recorrer cierta matriz JSON también mostrar algunos datos con como un retardo de un segundo.

El de abajo no funciona, ya que sólo se muestra un mensaje de una vez en lugar de 4

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


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

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

gracias, Richard

Answer 1

Si se quiere evitar un setInterval y simplemente obligado las llamadas a la longitud de su lista, puede crear una función de aplicación directa que guarda su índice actual en lugar de utilizar el uno del cierre. La variable del cierre va a terminar siendo siempre el último elemento en su cada bucle, ya que el bucle terminará mucho antes de la variable en la función setTimeout que se lee.

También está llamando a la función clearTimeout, lo cual no tiene mucho sentido para mí en este contexto.

Además de eso, todas sus setTimeouts se va a llamar casi al mismo tiempo. Esto daría lugar a todos los valores del flash en los milisegundos pantalla aparte (o demasiado rápido para verlo en algunos casos). Un bucle no es muy apropiado en este caso, ya que la función setTimeout es asíncrona. Un sistema de devoluciones de llamada es la mejor para un número finito de carreras, y un sistema de setInterval es mejor para una cantidad desconocida de carreras. Para mí el número de carreras debe ser el número de elementos en el objeto jQuery (los que actualmente están pasando por sus $ each ())

Yo sugeriría que haces algo como el siguiente ejemplo generalizado de su pregunta (generalizada ya que no tienen acceso a su 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);

Una demostración en vivo de este código se puede encontrar en: http://jsbin.com/ifuqo

Answer 2

Trate setInterval lugar:

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