Compte a rebours qui bloque ma page

Version imprimable

Bonjour à tous,

J'essaye de faire un décompte en javascript mais le problème c'est que cela bloque ma page. L'objectif pour moi est de faire un décompte infini car cela reprend toujours a zero quand cela arrive a 5. Seulement quand je lance le décompte, la page se bloque et il devient impossible de naviguer. Existe t'il un système de Thread en JS ?

Exemple de ce que je souhaite :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 0 1 2 3 4 5 0 1 2 3 4 5
Mon code bloquant :
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 <script type="text/javascript"> $(window).load(function() { $('#demarer').click(function() { rebour(10); }); }); function rebour(b) { $("#angleantenne").val('SYNCHRONISATION...'); while(true) { for (var i=0; i<=b; i++) { $("#angleantenne").val(i); sleep(1000); } } } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } </script>
Merci d'avance pour votre aide

20/08/2011, 11h48
Invité

salut,

regarde du coté de setInterval ou setTimeout.

Comme l'a dit galerien69, la solution est setInterval(ou setTimeout) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function rebour(limit) {
	this.limit = limit;
	this.current = 0;
	this.do = function(){
		$("#angleantenne").val(this.current);
		this.current = ++(this.current) % this.limit;
	};
}
 
$(window).load(function() {
	$('#demarer').click(function() {
		$("#angleantenne").val('SYNCHRONISATION...');
		var monRebour = new rebour(10);
		setInterval(function(){ monRebour.do(); },500); // 500 millisecondes pour l'exemple
	});
});

allez, parce que je m'ennuie, j'ai pondu une version plus pro :

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
function rebour(setter,speed,limit) {
	var that = this;
	var interval = null;
	var current = 0;
	speed = speed || 500; // default si non passé en paramètre
	limit = limit || 10; // default si non passé en paramètre
	var run = function(){
		setter(current);
		current = ++(current) % limit;
	};
	// public
	that.start = function(){
		interval = setInterval(run,speed);
	};
	that.stop = function(){
		clearInterval(interval);
	};
	// change
	that.setLimit = function(newLimit){
		limit = newLimit;
	};
	that.setSetter = function(newSetter){
		setter = newSetter;
	};
	that.setSpeed = function(newSpeed){
		speed = newSpeed;
	};
}
 
$(window).load(function() {
	var callback = function(value){$("#angleantenne").val(value);};
	var speed = 500, limit = 5;
	var monRebour = new rebour(callback,speed,limit); 
	$('#demarer').click(function() {
		$("#angleantenne").val('SYNCHRONISATION...');
		monRebour.start();
	});
});

Personnellement j'ai pondu ceci :

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
 
function test2() 
{ 
 *var result2 = $("#angleantenne");
 * 
 *var start = new Date().getTime(); 
 * 
 *var i = 0, limit = 360, busy = false; 
 *var processor = setInterval(function() 
 *{ 
 * *if(!busy && !stop) 
 * *{ 
 * * *busy = true; 
 * * * 
 * * *result2.val('time=' + *
 * * * *(new Date().getTime() - start) + ' [i=' + i + ']'); 
 * * * 
 * * *process(); 
 * * * 
 * * *if(++i == limit) 
 * * *{ 
 * * * *clearInterval(processor); 
 * * * *result2.val('time=' + *
 * * * * *(new Date().getTime() - start) + ' [done]');
 		if(!stop) {
			test2();
 		}
	 *}
 * * *busy = false;
 * *}
 *}, 1); 
 * 
}
 
 
function process()
{
  var above = 0, below = 0;
  for(var i=0; i<1000000; i++)
  {
    if(Math.random() * 2 > 1)
    {
      above ++;      
    }
    else
    {
      below ++;
    }
  }
}

C'est quoi le mieux pour vous ?

20/08/2011, 17h57
Willpower

Citation:

Envoyé par akrogames

C'est quoi le mieux pour vous ?

La vrai question : ton code fonctionne ? :mrgreen:

Sinon le point positif c'est que tu n'as déjà plus le "sleep" de la première version. ;)

Voici une version complète et fonctionnelle de ce que tu sembles désirer.
(avec exécution du progress à chaque étape, et une fonction(callback) s'éclenchant à chaque fois la limite atteinte.)

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
function rebour(action,speed,limit) {
	var that = this;
	var interval = null;
	callback = null;
	var current = 0;
	speed = speed || 500; // default si non passé en paramètre
	limit = limit || 10; // default si non passé en paramètre
	var run = function(){
		action(current);
		if(++current >= limit){
			that.stop();
			callback();
		}
	};
	// public
	that.start = function(_callback){
		callback = _callback;
		interval = setInterval(run,speed);
	};
	that.pause = function(){
		clearInterval(interval);
	};
	that.stop = function(){
		current = 0;
		clearInterval(interval);
	};
	// change
	that.setLimit = function(newLimit){
		limit = newLimit;
	};
	that.setAction = function(newAction){
		action = newAction;
	};
	that.setSpeed = function(newSpeed){
		speed = newSpeed;
	};
}
 
 
 
//$(window).load(function() {
	//var action = function(value){$("#angleantenne").val(value);};
	function process(value){
		console.log(value);
	};
	var speed = 1000, limit = 5;
	var monRebour = new rebour(process,speed,limit); 
//	$('#demarer').click(function() {
//		$("#angleantenne").val('SYNCHRONISATION...');
		var executionDuRebour = 0;
		var callback = function(){
			var now = new Date().getTime();
			console.log("executed in : "+(now - arguments.callee.time)+" sec.");
			arguments.callee.time = now;
			if(++executionDuRebour<10)
				monRebour.start(callback);
		};
		callback.time = new Date().getTime();
		monRebour.start(callback);
 
//	});
//});

20/08/2011, 18h25
akrogames

Oui, oui mon code fonctionne :) Pourquoi il est si moche que sa ?

Merci pour ta version. Est-ce que tu peux m'expliquer comment on simule un Thread précisément au sein de JS ? Car j'avoue ne pas trop comprendre comment cela fonctionne.

Citation:

Envoyé par akrogames

Oui, oui mon code fonctionne :) Pourquoi il est si moche que sa ?

Merci pour ta version. Est-ce que tu peux m'expliquer comment on simule un Thread précisément au sein de JS ? Car j'avoue ne pas trop comprendre comment cela fonctionne.

oui, je trouve ta version pire que la mienne ^^

sinon la notion de thread n'existe pas en javascript donc tout dépendra de ce que tu veux en faire exactement, mais dans tous les cas tu joueras avec les délais de setTimeout ou setInterval (ou encore des requêtes asynchrones par exemple).

voici un exemple de mini-thread qui exécute une liste d'actions avec un interval d'une demi-seconde entre chaque.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function thread(actionList,delai){ var i = 0; function process(){ // execute une action actionList[i++](); } // execute un appel recursif dans un delai return setInterval(process,delai); } var actionList = [ function(){alert("action 1");}, function(){alert("action 2");}, function(){alert("action 3");}, function(){alert("action 4");} ]; var interval = thread(actionList,500);
note: j'ignore si setInterval vérifie toujours bien que l'action précédente est terminé(je pense que c'est le cas), sinon pour être sûr que l'action précédente est terminée tu peux utiliser une setTimeout à la fin de chaque exécution plutôt qu'un setInterval global.