Slider et onglets inactifs
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:
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 :ccool:
Merci d'avance.
