Javascript/JQuery boucle à travers les valeurs de tableau

Question

J'essaie d'afficher/masquer les logos des sponsors sur mon site, afficher/masquer l'un après l'autre sans fin. Je pense que je suis un peu proche, mais après avoir cogné ma tête, j'ai décidé qu'il était temps de demander de l'aide. Voici mon code:

var sponsors = ["prointec","pequigraf"]; 
for (var i = 0; i < sponsors.length; i++){ 
    setTimeout($(document.getElementById(sponsors[i])).slideToggle("slow", "swing"), 1000); 
    setTimeout($(document.getElementById(sponsors[i])).slideToggle("slow", "swing"), 10000 * (i + 1)); 
} 

Fondamentalement, il devrait montrer un après l'autre (au bout de 10 secondes), mais au contraire, court à la fois. Des indices? Merci d'avance!

Answer 1

Vous devez attribuer une référence de fonction au délai d'attente. En outre, vous devriez imbriquer vos délais d'expiration. Essayez de penser de manière asynchrone lors de l'écriture de JavaScript.

Je n'ai pas testé cela, mais c'est ce que j'ai imaginé. Notez également que 10 secondes est de 10.000 millisecondes, pas 1000.

var sponsors = ["prointec","pequigraf"]; 

var i = 0; 

$(document.getElementById(sponsors[0])).show(); 
$(document.getElementById(sponsors[1])).hide(); 

var toggleSponsor = function() { 
    $(document.getElementById(sponsors[i])).hide(); 

    i = (i + 1) % sponsors.length; 
    $(document.getElementById(sponsors[i])).show(); 

    setTimeout(toggleSponsor, 10000); 
}; 

setTimeout(toggleSponsor, 10000); 

Answer 2

Je poste ceci comme une réponse au lieu d'un commentaire juste pour que je peux faire une mise en forme de code approprié.

Le code de rpamely ressemble à ce dont vous avez besoin, mais vous pouvez le simplifier un peu. Juste préfixer vos deux ID de sponsor avec «#» et vous pouvez supprimer tous les document.getElementById() appels:

var sponsors = [ "#prointec","#pequigraf" ]; 

var i = 0; 

$(sponsors[0]).show(); 
$(sponsors[1]).hide(); 

var toggleSponsor = function() { 
    $(sponsors[i]).hide(); 

    i = (i + 1) % sponsors.length; 
    $(sponsors[i]).show(); 

    setTimeout(toggleSponsor, 10000); 
}; 

setTimeout(toggleSponsor, 10000);