Discussion :

[tnntwister]

Bonjour,

J'essaie de faire un cycle slider avec prototype (des panneaux qui défilent à droite et à gauche quand on survole flèche de droite et de gauche).

voici la partie du code qui bloque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
startCycle: function(direction){
         if (direction == 'left') movement = this.moveLeft.bind(this);
         else movement = this.moveRight.bind(this);
 
         var periode = new PeriodicalExecuter(function() {
            // lancement du slider
            movement();
 
           // placement des observers
            prevCnt = 0;
            nextCnt = 0;
            $('marques_prev_btn').observe('mouseout', (function(event) {event.stop();prevCnt++; console.log(prevCnt); this.stop();}).bindAsEventListener(this));
            $('marques_next_btn').observe('mouseout', (function(event) {event.stop();nextCnt++; console.log(nextCnt); this.stop();}).bindAsEventListener(this));
        }, 0.2);
    }

plus haut j'ai une fonction avec un observer en mouseover pour lancer ce script.

l'ensemble marche assez bien, seulement c'est à l'arrêt du script que ca coince. le console.log n'est pas exécuté une fois, mais n fois, et il s'exécute de plus en plus à chaque essai (la première passe s'arrête vers 7, la seconde à 12, etc...).

J'en déduis que mon event.stop ne fonctionne pas correctement, mais je ne vois pas trop pourquoi, ou alors quel code je pourrais utiliser pour faire autrement.

merci de votre aide,

[tnntwister]

Bon, petite correction dans mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 startCycle: function(direction){
         if (direction == 'left') movement = this.moveLeft.bind(this);
         else movement = this.moveRight.bind(this);
 
        prevCnt = 0;
        nextCnt = 0;
 
         var periode = new PeriodicalExecuter(function() {
            // lancement du slider
            movement();
        }, 0.2);
 
        // placement des observers
        $('marques_prev_btn').observe('mouseout', (function(event) {event.stop();prevCnt++; console.log(prevCnt); periode.stop();}));
        $('marques_next_btn').observe('mouseout', (function(event) {event.stop();nextCnt++; console.log(nextCnt); periode.stop();}));
 
    }

maintenant que l'observer n'est plus dans le periodicalExecuter, la première fois ca marche bien (il n'exécute qu'une fois le console.log). par contre, les fois suivantes, il exécute le console.log 2 fois, puis 3, puis 4...
Je ne comprends pas d'ou ca peut venir.

[gwyohm]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 startCycle: function(direction){
       // ...
       $('marques_prev_btn').observe('mouseout', (function(event) {event.stop();prevCnt++; console.log(prevCnt); periode.stop();}));
        $('marques_next_btn').observe('mouseout', (function(event) {event.stop();nextCnt++; console.log(nextCnt); periode.stop();}));
 
    }

...
fois suivantes, il exécute le console.log 2 fois, puis 3, puis 4...
Je ne comprends pas d'ou ca peut venir.

Chaque fois que tu appelles statCycle, tu attaches un nouveau listener sur le mouseout.

essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 startCycle: function(direction){
       // ...
       $('marques_prev_btn').stopObserving('mouseout');
       $('marques_prev_btn').observe('mouseout', (function(event) {event.stop();prevCnt++; console.log(prevCnt); periode.stop();}));
       $('marques_next_btn').stopObserving('mouseout');
        $('marques_next_btn').observe('mouseout', (function(event) {event.stop();nextCnt++; console.log(nextCnt); periode.stop();}));
 
    }

[tnntwister]

merci merci merci !