IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Compte a rebours qui bloque ma page


Sujet :

JavaScript

  1. #1
    Membre très actif

    Inscrit en
    Août 2005
    Messages
    401
    Détails du profil
    Informations forums :
    Inscription : Août 2005
    Messages : 401
    Par défaut Compte a rebours qui bloque ma page
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    <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

  2. #2
    Invité
    Invité(e)
    Par défaut
    salut,

    regarde du coté de setInterval ou setTimeout.

  3. #3
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Comme l'a dit galerien69, la solution est setInterval(ou setTimeout) :

    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
    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
    	});
    });

  4. #4
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    allez, parce que je m'ennuie, j'ai pondu une version plus pro :

    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
    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();
    	});
    });

  5. #5
    Membre très actif

    Inscrit en
    Août 2005
    Messages
    401
    Détails du profil
    Informations forums :
    Inscription : Août 2005
    Messages : 401
    Par défaut
    Personnellement j'ai pondu ceci :

    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
     
    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 ?

  6. #6
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Citation Envoyé par akrogames Voir le message
    C'est quoi le mieux pour vous ?
    La vrai question : ton code fonctionne ?


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

  7. #7
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    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 : 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
    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);
     
    //	});
    //});

  8. #8
    Membre très actif

    Inscrit en
    Août 2005
    Messages
    401
    Détails du profil
    Informations forums :
    Inscription : Août 2005
    Messages : 401
    Par défaut
    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.

  9. #9
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Citation Envoyé par akrogames Voir le message
    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 : 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
    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.

Discussions similaires

  1. PHP exec ($command) qui bloque ma page
    Par danzka dans le forum Langage
    Réponses: 1
    Dernier message: 24/10/2011, 15h32
  2. compte a rebours qui accélère chaque fois
    Par kyluxox dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 24/05/2010, 07h02
  3. Compte a rebours qui ne fonctionne pas au mois de février
    Par rougenoir dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 02/02/2009, 10h47
  4. [Système] exec() qui bloque le chargement de page sous IE
    Par Ryan Sheckler dans le forum Langage
    Réponses: 6
    Dernier message: 09/01/2007, 22h02
  5. Formulaire sur plusieurs pages qui bloque
    Par yiuche dans le forum Langage
    Réponses: 7
    Dernier message: 03/08/2006, 09h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo