Boucle avec un délai de jquery / js

J'ai de la circulation de la lumière - 3 couleurs:

<div class="green" id="ready"></div>
<div class="orange" id="steady"></div>
<div class="red" id="go"></div>

et tableau:

var status = ["ready", "steady", "go"];

Je veux ajouter et de supprimer la classe (pour imiter clignotant) de chaque dans l'infini boucle avec un peu de retard, mais ce code tout faire en une seule fois. Comment puis-je le résoudre?

jQuery.each(status, function() {
    setTimeout(function() {
        $("#" + this).addClass('active');
    }, 3000);
});
multiplier le retard pris par l'index de chaque itération.
ramener le <blink> tag!
Travailler avec une file d'attente: stackoverflow.com/questions/2510115/...
BTW: le vert est prêt et rouge, c'est d'aller...?

OriginalL'auteur Vojtech Lacina | 2013-03-13

  1. 15

    http://jsfiddle.net/9feh7/

    Vous êtes l'établissement de tous les exécuter à la fois. Multiplier par l'indice à chaque fois.

    $('#ready, #steady, #go').each(function(i) { 
    var el=$(this);
    setTimeout(function() { 
        el.addClass('active');
    }, i * 3000); 
});

    Noter que i dans la première instace est de 0, donc si vous voulez #prêt à attendre 3 secondes (i+1) * 3000

    Aussi, $('#'+this) n'est pas la syntaxe correcte, c'est $(this), cependant qui ne fonctionnent pas à l'intérieur de la setTimeout.

    Utilisation setInterval au lieu de setTimeout pour exécuter une infinité (à moins d'être effacés) en boucle.

    Oh, merci beaucoup de travail maintenant, mais avec $('#'+[i]).addClass('active'); Maintenant, comment puis-je exécuter en boucle infini?
    utiliser setInterval au lieu de setTimeout : developer.mozilla.org/en-US/docs/DOM/window.setInterval
    j_mcnally la réponse est à vous.

    OriginalL'auteur Popnoodles

  2. 3

    Essayez ceci:

    var status = ["ready", "steady", "go"];
var i=1;
jQuery(status).each(function(index,value) {
    var self=this;
    setTimeout(function() {
       $(self).addClass('active');
    }, 3000*i);
    i++;
});

    Violon: http://jsfiddle.net/M9NVy/

    Pourquoi en ajouter une autre var i lorsque vous êtes déjà à la création d' index?
    Comme indice de commencer à partir de 0, ce qui permettra d'ajouter une classe active, sans aucun délai. Nous pouvons utiliser index+1 à la place.

    OriginalL'auteur Rohan Kumar

  3. 0

    Je dirais que vous êtes mieux chaînage de votre objectif final.

    1) Installation d'une fonction de rouge. à la fin de la rouge fonction calendrier couleur jaune avec une temporisation de 1000 ms.
    2) À la fin de jaune horaire 1000ms le temps pour un rouge

    3) À la fin de vert horaire 1000ms délai d'attente pour le vert.

    4) démarrez votre code en appelant rouge()

    Maintenant, il sera en boucle à l'infini avec la maladresse de multiplier votre délai d'attente.

    Si vous détestez que puis je utiliser setInterval plutôt que setTimeOut mais vous avez besoin de plus de mathématiques.

    OriginalL'auteur j_mcnally