setInterval qui ralenti lors d'un changement d'onglet

**Romaiiiiiin** · 09/05/2015, 13h28

Bonjour,

Je suis sur une application web multi-joueur et je dois faire certaines actions apres un certain temps qui doit être le même sur toute les machines des utilisateur.

- Le problème ?

Lorque je test sur deux navigateur différents avec l'onglet de l'appli ouvert le compte à rebours est identique sur les deux navigateur, le problème est quand sur l'un des navigateurs j'ouvre par exemple un deuxième onglet alors là le setInterval de mon appli sur ce navigateur prend totalement du retard par rapport aux autres, mais vraiment beaucoup de retard, et le retard prit augmente en fonction du temps ou je ne suis pas sur l'onglet de mon appli. Ce qui me pose un réelle problème, comment le résoudre ?

Je pourrais faire le setInterval côté serveur (nodeJS) comme ça tous les clients auront le message au même moment cependant ça ne change pas le fait que le compteur côté client sera totalement désordonné comparé à la réalité et que je pense que ça fait trop lourd pour le serveur de gérer tous ces setInterval en même temps (1 par salle), il peut y avoir beaucoup de salle.

Merci pour toute vos futures aides !

Nous avons ici, un premier setInterval qui est compte_a_rebour qui quand il a fini lance le second qui est chrono.

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
/* ------------------------------------------------
* COMPTE A REBOUR POUR L'AFFICHAGE DE LA LETTRE
* ------------------------------------------------ */
compte_a_rebour = function(i, obj, txt_final){
	compte_a_rebour = setInterval(function(){
		if (i >= 1){
			$(obj).html('<b>'+ i +'</b>'); i--;
		}
		else{	
			clearInterval(compte_a_rebour);
			$(obj).html('<b>'+ txt_final +'</b>');
			chrono(100, $('#chrono'));
		}
	}, 1000);
}
/* -----------------------------------------
 * COMPTE A REBOUR POUR LA FIN DE LA MANCHE
 * ----------------------------------------- */
chrono = function(i, obj){
	chrono = setInterval(function(){
		if (i > 0) {
			$(obj).html(i); i--;
		}
		else{
			$(obj).html('');
			clearInterval(chrono);
		}
	}, 1000)
}