Discussion :

[Njörd]

Bonjour,

J'ai mis en place un petit script qui me permet de faire défiler du texte (des télex) dans une page d'accueil.

Ayant utilisé les fonctions setTimeout() et clearTimeout() j'ai pu régler comme je voulais le défilement. Avec les tests, j'ai pu tomber sur la notion d'onglet inactif mis en place dans les navigateurs récents pour des raisons de performance.

Ayant un temps de slide de 8 secondes, j'ai le droit au défilement à 1 seconde quand je change d'onglet sous FF et Chrome.

N'ayant pas trouver de solution pour résoudre ce souci de conception, j'ai opté pour la stratégie suivante :

Ce que j'ai :
- Deux timers : le timer du slide appeler "timer" et le timer de l'observateur appeler "observer".
- Des fonctions pour chaque timer me permettant des les stopper / relancer
- Une fonction startPlay()

Ce que je fais :
- Lorsqu'on arrive sur la page, je lance le défilement avec startPlay()
- Cette fonction lance la fonction playTimer() et startTimerObserver()
- Tant que l'utilisateur bouge sa souris, le timer startTimerObserver() est tué pour être relancé => $('body').mouseover()
- Du coup, si l'utilisateur est inactif le temps du timer observer (55 secondes), je stop le timer du slide des télex.
- De deux choses l'une : soit l'utilisateur est encore sur la page et le fait de bouger la souris ne stop pas le slider des télex, soit il n'y est plus et je considère qu'il a changé d'onglet (s'il c'est juste absenté le fait de revenir et bouger la souris relancer le slide). Cela me permet de ne plus remplir la pile JS pendant qu'on est sur un autre onglet.
- Ainsi, lorsque l'on change d'onglet, je relance immédiatement le slider lorsque l'on revient sur l'onglet en question.

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
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
$(document).ready( function(){
    var stopSlide;
    var observer;
    var ongletActif;
    var timer;
    var delayTimer = 8000;
    var delayStartTimer = 200;
    var delayStartObserver = 55000;
 
    startTimer(delayTimer);
 
    function startTimer(delay){
        ongletActif = true;
        stopSlide = false;
        observer = null;        
        timer = null;
 
        stopTimer();                                                                   
        playTimer(delay);
        startObserver(delayStartObserver);
    }
 
    function progress(){                
        if (stopSlide) return;          
        playTimer(delayTimer);
    }
 
    function playTimer(delay){                
        if(timer != 'undefined')stopTimer();
        timer = setTimeout(function(){  
            $('.slideshowTelex ul').animate({
                marginLeft:-600
            }, 1800,function(){  
                $(this).css({
                    marginLeft:0
                }).find('li:last').after($(this).find('li:first'));  
            })                    
            progress();
        }, delay);                
    }
 
    function stopTimer(){
        if (timer == null) return;
        clearTimeout(timer);
        timer = null;
    }
 
    function startObserver(delay){
        if(observer != 'undefined')stopObserver();
        observer = setTimeout(function() {
            console.log('inactif');
            ongletActif = false;
            stopTimer()
        }, delay);
    }
 
    function stopObserver(){
        if (observer == null) return;
        clearTimeout(observer);
        observer = null;
    }
 
    $('.unTelex').mouseover( function() {
        stopSlide = true;
        stopTimer();
    });
 
    $('.unTelex').mouseleave( function() {
        startTimer(delayStartTimer);
    });
 
    $('body').mousemove( function() {                
        stopObserver();
        if(ongletActif){            
            startObserver(delayStartObserver);
        }else{
            startTimer(delayStartTimer);
            console.log('réactivé car onglet de nouveau actif');
        }
    });   
});

Bien que fonctionnel, je suis sur que l'on peut faire mieux et plus propre. Mouseover c'est sympa mais bon, je trouve ça crade.

Les plugins jQuery arrive bien à ne pas avoir ce problème mais je n'ai pas saisi la subtilité en parcourant les sources.

Je suis preneur de tous conseils

Merci d'avance.

[danielhagnoul]

Bonsoir

Avec les tests, j'ai pu tomber sur la notion d'onglet inactif mis en place dans les navigateurs récents pour des raisons de performance.

Merci de donner des liens vers les explications, car j'ignore tout de ce problème et je pense ne pas être le seul.

[Njörd]

Bonsoir danielhagnoul,

Ce que j'entendais par "onglet inactif" c'est le fait que lorsque l'on a plusieurs onglets ouverts les navigateurs récents passent ceux qui n'ont pas été touchés depuis un certains temps (environ 2min) à un statut inactif.

Pour Mozilla => Petites explications

Résultat ? Toutes les animations présentent dans la pile JS, notamment celle avec un timer, seront lancés chaque seconde. ça permet ainsi de réduire les ressources utilisés par ces onglets "inactifs".

Exemple dans mon cas :
J'ai un timer de 8 secondes pour lancer mon animation de slide.
Disons que je laisse l'ordinateur 30 minutes. ça nous fais donc 1800 secondes / 8 secondes = 225 appels. Sauf que, comme je ne suis pas sur l'onglet qui lance ces animations, l'onglet étant en inactif, les animations vont toutes se déclenchées lorsque je reviendrais dessus et que le navigateur repassera l'onglet en actif ===> 225 appels d'un coup, une demi-heure de pile sauf si je fais un F5. Du coup, le truc que les dev de ces navigateurs ont trouvé c'est de dire : quand un onglet est inactif, toutes ses animations prennent un timer de 1 seconde. Du coup, notre pile JS avec 225 appels se terminent en 3.75 minutes.

Dans mon cas, c'est pas folichon, mais ils doit y avoir pas mal d'exemples où ça devient intéressant genre les mobiles ou les jeux.

Pour répondre à mon problème, vu que c'est un problème de pile JS finalement, ce qu'il me manquait c'était tout simplement la fonction stop() de jQuery. Pour le moment, il faudrait que je fasse stop(true), pour vider la pile JS quand je reviens sur l'onglet.

Mais en mieux, je fais comme les plug-in jQuery, et je joue avec this.stop().

J'ai plus qu'à donc

[danielhagnoul]

Bonsoir

Intéressant à savoir et, je crois, potentiellement gênant pour certaines applications.

Oui ! pour éradiquer une "queue" d'animations en attente, la solution c'est la méthode stop(). Mais cette méthode a évolué récemment : http://www.developpez.net/forums/d12...onibles-tests/

Je pense que ce qu'il vous faut c'est un stop(true, false) maintenant : .clearQueue().stop().

Regarder la démonstration pour comprendre les différences de comportement : http://jsfiddle.net/dmethvin/AFGgJ/.

[Njörd]

Bonsoir danielhagnoul,

Merci pour les précisions sur la nouvelle syntaxe. Effectivement, elle est bien plus clair.