bonjour j'ai un petit probleme avec la manipulation de la fonction setTimeout(). ceci est mon code:

var listeNiv2 = '<ul>';
for(var i=0; i<4; i++){
    setTimeout(function(){
        listeNiv2 += '<li><img src="niv2/'+(i+1)+'.JPG"></li>';
    },2000);
}
listeNiv2 = '</ul>';
// integration à la page

le probleme avec ce code c'est qu'à la sortie de la boucle je n'est que la dernier valeur de i qui a été prise en compte (donc un seul <img>) parce que pendant l'attente de 2000 ms, la boucle continuait fonctionner.

j'aimerais qu'on ne puisse pas traverser sans passer dans le setTiimeout.

petite aide please

-
Edité par FlorianZebaze 12 février 2017 à 14:31:47

Salut,

Tu t'y prend mal. Desole je suis pris d'une grosse flemme aujourd'hui donc je vais te laisser ecrire le code, mais je te donne des pistes:

La fonction for() est synchrone alors que setTimeout() est asynchrone.
Il te faut faire donc QUE du asynchrone !!!
Donc pour faire ta boucle, n'utilise pas de for(), while(), etc... mais fais ca de maniere recurssive.

En gros, tu cree une fonction, ex: prout()
Cette fonction execute son code puis a l'interieur de prout() tu fais un setTimeout de prout()
Et ce jusqu'a ce que i soit egale a 3 (donc i devra etre une variable global que tu devras incrementer a chaque appel de prout() ).

Je te laisse donc ecrire ce code. 

-
Edité par Scion 16 février 2017 à 2:06:22

Bonjour,

A mon avis il faut que tu regardes du coté de la fonction setInterval() qui te permet de faire une action toute les x seconde et un petit clearInterval() qui te permettra de mettre fin a ta "boucle" une fois la condition d'arrêt atteinte.

Enfin, si je ne me trompe pas en pensant que tu veux ajouter une image toutes les 2 seconde

Hello !

Regarde du côté des closures. Le cours d'OC présente un cas très similaire au tien.

Ce qui est marrant avec ce "cas concret" c'est qu'un simple "let" suffit.

var divs = document.getElementsByTagName('div'),
    divsLen = divs.length;

for (let i = 0; i < divsLen; i++) {

    setTimeout(function() {
        divs[i].style.display = 'block';
    }, 200 * i); // Le temps augmentera de 200 ms à chaque élément

}

Attention, let est de l'ES6 et ne sera pas compris par tous les navigateurs. Utiliser un outil comme Babel peut alors devenir nécessaire, ce qui peut être bourrin pour ce genre de problèmes...

Mais effectivement, let permet de gérer simplement ces soucis

On doit être a 5% des users avec un navigateur qui ne gere pas let et ca ne cesse de diminuer. Je pense qu'il est temps de les laisser tomber, surtout pour des nouveaux trucs.

Je ne sais pas où tu sors tes 5% de non support, ça s'approche plutôt des 20%

Dont IE10 et les vieux téléphones Android. Et Opéra mini.

Alors oui, on peut ne pas prendre en compte ces navigateurs obsolètes, ça reste un choix. Tout dépend des besoins du projet et des visiteurs à cibler.

Sur un forum comme OpenClassrooms, qui est censé conseiller au mieux les développeurs, j'ai du mal avec l'idée de dire "laisse tomber et va de l'avant", alors qu'en entreprise on lui demandera de gérer de l'IE10, voire des versions inférieures.

Puis même, connaitre le concept des closures est plutôt important dans le monde JavaScript, on ne peut pas passer à côté

KorHosik a écrit:

Sur un forum comme OpenClassrooms, qui est censé conseiller au mieux les développeurs, j'ai du mal avec l'idée de dire "laisse tomber et va de l'avant", alors qu'en entreprise on lui demandera de gérer de l'IE10, voire des versions inférieures.

En entreprise on me demande souvent de ne gérer qu'un navigateur (Chrome fut un temps et maintenant firefox dans une nouvelle entreprise) mais c'est vrai que c'est sur des appli interne. Mais même en appli externe j'avais un choix assez libre sur la compatilité des navigateurs...et parfois quand on dit que le projet va être 50% plus cher pour gérer 10 ou 15% de navigateur en plus....

Peut-être tu cherches un processus plutôt récursif où on attend 2s avant d'ajouter l'image suivante?

var listeNiv2 = '<ul>';
function addLi(i){
    if(i<4){
    	listeNiv2 += '<li><img src="niv2/'+(i+1)+'.JPG"></li>';
    	//Ne passe au suivant que dans 2s
    	var next = function(){addLi(i+1);};
    	setTimeout(next, 2000);
    }else{//quand on est arrivé à la fin, on ferme le ul
         listeNiv2 += '</ul>';
       //et Ajout au Dom
   }
}
//On lance les ajouts de li
addLi(0);
//Attention, toute fonction appelée maintenant débutera de suite, 
// l'ajout de li ne sera pas terminé

Mais je ne comprends pas l'utilité , car ce ne sera pas visible pour l'utilisateur, car ajouter au Dom à la fin,

-
Edité par Elisabeth24 21 février 2017 à 15:07:35