L'incrémentation ne se fait pas

Version imprimable

Bonjour,

J'ai le script suivant, et son comportement est plus que louche...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
    var titleContent;
    var txtContent;
    var nbPhotos;
    var allSlides;
    var i = 1;
 
    function nextContent(nb){
        var infos = resultAjax("getContent", 186, nb); // resultAjax est une fonction envoyant une requête ajax et retournant le résultat sous forme de JSON
        infos = infos.split('|');
        titleContent = infos[0];
        txtContent = infos[1];
        nbPhotos = infos[2];
        allSlides = eval('['+infos[3]+']');
        return (titleContent!='' && txtContent!='' && nbPhotos!='' && allSlides!='') ? true : false;
    }
 
    function afficheContent(){
        $(function(){
            $("#titleContent").html(titleContent);
            $("#txtContent").html(txtContent);
            $.fn.supersized.options = {
                navigation: 0, // << || >>
                slide_counter: 0, // x / n
                slide_captions: 0, // txt
                slide_interval: (30/nbPhotos)*1000, // tps
                slides : allSlides
            };
            $('#supersized').supersized();
        });
    }
 
    // i vaut 1, ok
    nextContent(i);
    afficheContent();
    window.setInterval(function(){
        i++;
        // i vaut toujours 1 Oo
        if(nextContent(i)){
            $("#content").fadeOut(200, function(){
                afficheContent();
            });
            $("#content").fadeIn(200);
        }
        else{
            // i ne revient jamais à 1
            i=1;
    	}
    }, 5000);

Bref, en gros ce que j'aimerais c'est :
1) On affiche une première fois la page (via la fonction) avec le résultat de la requête.
2) Au bout de 30 secondes, on incrémente i de 1, et on redemande un envoie de requête.
- Si la requête retourne quelque chose, on affiche la page
- Sinon, on remet i à 1

La boucle est infinit et c'est ce que je souhaite.

D'où vient le PB svp ? Cela fait plusieurs heures que je me casse les dents la dessus et je ne vois vraiment pas...

Merci d'avance.

je te suggère de remplacer
Code:

1 2 3 window.setInterval(function(){ i++; if(nextContent(i)){
par
Code:

1 2 window.setInterval(function(){ if(nextContent(i++)){
quitte à réinitialiser i à 0 en cas de retour nul;

16/01/2011, 13h43
Bovino

Tout d'abord, ton code me semble assez maladroit : mélanger du JavaScript pur et jQuery peut être problématique...

Sinon, ton appel AJAX est-il synchrone ? Parce que si ce n'est pas le cas, la fonction nextContent() renverra toujours false et tu rentreras toujours dans le if...
16/01/2011, 23h28
FotoXe33

Tout d'abord merci à vous deux pour vos réponses.

J'essaierais dès demain ta méthode javatwister.

Quant à ta question Bovino, je ne serais te dire : j'utilise HTML_AJAX, un plugin pear, donc qu'en est-il ?
De plus, je suis d'accord que mélanger JS et jQuery est très salle, saurais-tu comment éviter cela ?

Merci d'avance.

Bon j'ai un peut avancé, notamment en éliminent le plus possible de JS pur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
    var titleContent;
    var txtContent;
    var nbPhotos;
    var allSlides;
    var i = 1;
 
    function nextContent(nb){
        var infos = resultAjax("getContent", 186, nb);
        infos = infos.split('|');
        titleContent = infos[0];
        txtContent = infos[1];
        nbPhotos = infos[2];
        allSlides = eval('['+infos[3]+']');
        return (titleContent!='' && txtContent!='' && nbPhotos!='' && allSlides!='') ? true : false;
    }
 
    function afficheContent(){
        $(function(){
            $("#titleContent").html(titleContent);
            $("#txtContent").html(txtContent);
            $.fn.supersized.options = {
                navigation: 0, // << || >>
                slide_counter: 0, // x / n
                slide_captions: 0, // txt
                slide_interval: (30/nbPhotos)*1000, // tps
                slides : allSlides
            };
            //$('#supersized').supersized();
        });
    }
 
    nextContent(i);
    afficheContent();
    i++;
 
    // Start a polling loop with a counter.
    $.doTimeout(5000, function(){
    	if(nextContent(++i)){
    		$("#content").fadeOut('slow');
    		afficheContent();
    		$("#content").fadeIn('slow');
    	}
    	else{
            i=1;
    	}
        return true;
    });

Encore quelque problème :
1) A parement supersized "block" le script (le fadeIn ne s'exécute jamais).
2) Le i ne s'incrémente pas comme il faut : j'ai d'abord le premier contenu, puis encore le premier, et ensuite que le deuxième en boucle (il ne revient jamais à 1)...

Merci d'avance pour votre aide.

N.B : y aurait-il moyen d'exécuter d'abord une fonction puis de faire patienter le script x secondes ? Car ici il attend d'abord les x secondes puis exécute le code demandé, ce qui me fait faire quelque chose de très moche avant ma boucle...

Citation:
Envoyé par FotoXe33
Bon j'ai un peut avancé, notamment en éliminent le plus possible de JS pur :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 var titleContent; var txtContent; var nbPhotos; var allSlides; var i = 1; function nextContent(nb){ var infos = resultAjax("getContent", 186, nb); infos = infos.split('|'); titleContent = infos[0]; txtContent = infos[1]; nbPhotos = infos[2]; allSlides = eval('['+infos[3]+']'); return (titleContent!='' && txtContent!='' && nbPhotos!='' && allSlides!='') ? true : false; } function afficheContent(){ $(function(){ $("#titleContent").html(titleContent); $("#txtContent").html(txtContent); $.fn.supersized.options = { navigation: 0, // << || >> slide_counter: 0, // x / n slide_captions: 0, // txt slide_interval: (30/nbPhotos)*1000, // tps slides : allSlides }; //$('#supersized').supersized(); }); } nextContent(i); afficheContent(); i++; // Start a polling loop with a counter. $.doTimeout(5000, function(){ if(nextContent(++i)){ $("#content").fadeOut('slow'); afficheContent(); $("#content").fadeIn('slow'); } else{ i=1; } return true; });
Encore quelque problème :
1) A parement supersized "block" le script (le fadeIn ne s'exécute jamais).
2) Le i ne s'incrémente pas comme il faut : j'ai d'abord le premier contenu, puis encore le premier, et ensuite que le deuxième en boucle (il ne revient jamais à 1)...

Merci d'avance pour votre aide.

N.B : y aurait-il moyen d'exécuter d'abord une fonction puis de faire patienter le script x secondes ? Car ici il attend d'abord les x secondes puis exécute le code demandé, ce qui me fait faire quelque chose de très moche avant ma boucle...
Normal qu'il ne revient jamais à 1 :
si l'appel à 2 renvoie true, ton prochain appel se fera sur 3. Autrement i vaudra 1 et ++i faudra donc 2, ton prochain appel se fera donc de nouveau sur 2.
Javatwister t'as proposé la solution :
if( nextContent ( i++ ))
Pourquoi l'as-tu transformé en
if( nextContent( ++i))
?

Ensuite rien à voir avec ton problème mais la fonction eval est une abomination, uitilise plutôt une des méthodes de l'objet Array. ( désolé étant sur mon gsm, je n'ai pas envie de chercher laquelle et encore moins de te proposer une solution sans l'avoir testée)

:-)

Édit: en fait c'est pas normal que tes 2 premiers appels se fassent sur 1. En lisant ton code, ton premier appel devrait se faire sur le nbr 2 et les suivants sur 2 ou plus.

Pour ton problème d'appel tout au début et puis de polo toutes les 5 sec, ne connaissant pas les possibilités qu'offre la méthode doTimeout, je ne peux que te suggérer de faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function refresh(){ if(nextContent(++i)){ $("#content").fadeOut('slow'); afficheContent(); $("#content").fadeIn('slow'); } else{ i=1; } return true; } refresh(); $.doTimeout(5000, refresh);

17/01/2011, 12h48
FotoXe33

Citation:

Envoyé par Willpower

Normal qu'il ne revient jamais à 1 :
si l'appel à 2 renvoie true, ton prochain appel se fera sur 3. Autrement i vaudra 1 et ++i faudra donc 2, ton prochain appel se fera donc de nouveau sur 2.
Javatwister t'as proposé la solution :
if( nextContent ( i++ ))
Pourquoi l'as-tu transformé en
if( nextContent( ++i))
?

Je viens de faire le i++, certes il s'incrémente bien, mais un pb ce pose. Le i n'a pas l'air de passer dans la fonction $.doTimeout ! En effet, lorsque je fais des alerte, le i du début vaut 1, passage dans le premier appel (hors $.doTimeout), re alert : i vaut 2, mais lors du premier passage dans $.doTimeout, i vaut 0 !!!

Citation:

Envoyé par Willpower

Ensuite rien à voir avec ton problème mais la fonction eval est une abomination, uitilise plutôt une des méthodes de l'objet Array. ( désolé étant sur mon gsm, je n'ai pas envie de chercher laquelle et encore moins de te proposer une solution sans l'avoir testée)

:-)

Certes je sais :( mais je n'ai malheureusement pas le choix car ce n'est pas un tableau mais une chaine de caractère entouré de crochet (oui ça parait débile). Ce n'est pas de moi mais du plugin supersized, et malheureusement il faut lui balancer un eval pour qu'il comprenne...
Si vous avez d'autres méthodes je suis tout ouï :)
17/01/2011, 13h06
Willpower
pour le eval, je suis sur que si tu tape"array javascript" dans Google, tu trouveras une méthode qui resoud ton problème. Autrement je regarderai ça se soir chez moi.

Ps: j ai édité mon précédent message pendant ta réponse.

Pour le i, peut-etre que la fonction doTimeout à été codé par un abruti du cerveau et qu'il utilise la variable i. Essaie p-e de remplacer i partout avec un autre nom. :-)

Édit: en fait les libraires tout autant que devrait définir vos variables globales dans un objet du genre :
Code:

1 2 var monEnvironnemtGlobalAvecUnNomBienSpecifique = {}; monEnvironnemtGlobalAvecUnNomBienSpecifique.i = 1;

Merci pour toutes tes réponses qui m'ont énormément aidé !

Voici mon code à présent :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
    var envDev = {
        titleContent : '',
        txtContent : '',
        nbPhotos : 0,
        allSlides : '',
        i : 0
    };
 
    (function($){
    	nextContent = function(nb) {
            var infos = resultAjax("getContent", 186, nb);
            infos = infos.split('|');
            envDev.titleContent = infos[0];
            envDev.txtContent = infos[1];
            envDev.nbPhotos = infos[2];
            envDev.allSlides = eval('['+infos[3]+']');
            return (envDev.titleContent!='' && envDev.txtContent!='' && envDev.nbPhotos!='' && envDev.allSlides!='') ? true : false;
    	}
 
    	afficheContent = function(){
            $(function(){
                $("#content").fadeOut(200);
                $("#titleContent").html(envDev.titleContent);
                $("#txtContent").html(envDev.txtContent);
                $.fn.supersized.options = {
                    navigation: 0, // << || >>
                    slide_counter: 0, // x / n
                    slide_captions: 0, // txt
                    slide_interval: (30/envDev.nbPhotos)*1000, // tps
                    slides : envDev.allSlides
                };
                $('#supersized').supersized();
                $("#content").fadeIn(200);
            });
    	}
 
    	refresh = function(){
    	    if(nextContent(++envDev.i)){
                afficheContent();
            }
            else{
            	envDev.i=0;
                nextContent(++envDev.i);
                afficheContent();
            }
            return true;
    	}
    })(jQuery);
 
    refresh();
    $.doTimeout(5000, refresh);

Tout marche (ormis supersize mais c'est 2-3 réglages à part...).

Je laisse quand même le post ouvert jusqu'a ce que je trouve la fonction remplaçant eval() (des fois que j'aurais des PB).

Merci en tout cas.

17/01/2011, 14h17
Willpower

La réponse était deja dans ton code en fait :
allSlides = infos[3].split(',');
Si ton objet valait un truc du genre :
"Machin1, machin2, machin3"

Ou si j'ai mal compris et que ton objet de base avait deja des crochets (mais dans ce cas la tu n'aurais pas remis des crochetssupplémentaires dans eval ) du genre :
"[Machin1, macgin2, machin3]"

Alors tu fais :
allSlides = infos[3].substring(1, -1).split(',');

:-)

Édit: non-testé -> je ne garanti pas le résultat.
17/01/2011, 16h17
FotoXe33

Merci en tout cas.

J'avais déjà tester et en fait ce plugin est vraiment zarb. J'ai déjà émi des soupçons plus haut mais je les ai confirmés tout à l'heure : c'est bel et bien une chaine de caractère entouré de croché et non un tableau.

Bref, en parlant de ça j'y retourne car il me fait vraiment tourné en bourique ce module...

Merci encore et A+
17/01/2011, 16h39
Willpower

Citation:

Envoyé par FotoXe33

Merci en tout cas.

J'avais déjà tester et en fait ce plugin est vraiment zarb. J'ai déjà émi des soupçons plus haut mais je les ai confirmés tout à l'heure : c'est bel et bien une chaine de caractère entouré de croché et non un tableau.

Bref, en parlant de ça j'y retourne car il me fait vraiment tourné en bourique ce module...

Merci encore et A+

Si ta chaîne a descrochets ( [] ), en les remettant une seconde fois dans ton "eval" tu créais un tableau contenant une seule cellule qui elle même contenait un autre tableau avec tes data. Es-tu certains que c'était ton but recherché ? Enfin dans tous les cas ma première solution fait pareil que ton eval. Mais si tu n'as pas besoin d'avoir un tableau d'une cellule avec un deuxième tableau dedans ET que ta chaîne contient bien les crochets, alors essaye ma seconde solution. ;-)
18/01/2011, 09h31
FotoXe33

Citation:

Envoyé par Willpower

Si ta chaîne a descrochets ( [] ), en les remettant une seconde fois dans ton "eval" tu créais un tableau contenant une seule cellule qui elle même contenait un autre tableau avec tes data. Es-tu certains que c'était ton but recherché ? Enfin dans tous les cas ma première solution fait pareil que ton eval. Mais si tu n'as pas besoin d'avoir un tableau d'une cellule avec un deuxième tableau dedans ET que ta chaîne contient bien les crochets, alors essaye ma seconde solution. ;-)

Non car le plugin est à parement paramétré pour recevoir du texte et non un objet de type Array... J'ai essayer mais il me fait une erreur... Tant pis pour le eval, c'est pas la mer à boire non plus...

Merci en tout cas
18/01/2011, 12h24
Willpower

Citation:

Envoyé par FotoXe33

Non car le plugin est à parement paramétré pour recevoir du texte et non un objet de type Array... J'ai essayer mais il me fait une erreur... Tant pis pour le eval, c'est pas la mer à boire non plus...

Merci en tout cas

mais ton eval crée un tableau !

Ma première solution fait exactement pareil que ton eval mais proprement. (enfin en théorie car j'ai toujours pas testé. )

Édit: en fait je ne suis même pas sûr de ce que ton eval renvoie, mais ce que je sais, c'est que c'est une abomination de l'utiliser. (sauf cas exceptionnels, mais pas ici.

Si t'as réellement besoin d'un string alors tu fait :
allSlides = "[" + infos[3] + "]";