Stopper l'action en cours et en exécuter une nouvelle

**Arsene12** · 07/08/2017, 19h52

Bonjour,

J'ai un bouton et une div. Lorsque je clique sur le bouton (Timer), un compteur s'enclenche dans la div :

https://jsfiddle.net/3dc6p4w7/1/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<button id="Timer">Timer</button>
<button id="Number">Number</button>
<br><br>
<br><br>
<div id="myNote" value="1" >1</div>

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
$('#Timer').on('click',function(e) {
	increment(1);
 $('#myNote').show(); 
});
 
function increment(i) {
  $('#myNote').text(i);
	if(i < 10000) {
  	setTimeout(function() {
  		increment((i+1));
    }, 100);
	}
} 
 
 $('#Number').on('click',function() {
	 $('#myNote').text("TEXTE");
});

J'ai un deuxième bouton (Number) qui affiche un texte dans la div lorsqu'on on y clique dessus.

Je voudrai donc qu'en cliquant sur le deuxième bouton, après avoir cliqué sur le premier bouton, le compteur s'arrête et le texte s'affiche de façon permanente.

En d'autre termes, comment puis-je faire pour arrêter l'action du premier bouton et lancer l'action du deuxième.

Merci de votre aide,

Arsène

**Doksuri** · 08/08/2017, 08h22

passe par une variable globale pour savoir si tu dois faire tourner le script ou non

Code javascript :

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
var running = false;
 
$('#Timer').on('click',function(e) {
	running = true;
    increment(1);
    $('#myNote').show();
});
 
function increment(i) {
    $('#myNote').text(i);
    if(i < 10000 && running) {
        setTimeout(function() {
            increment((i+1));
        }, 100);
    }
}
 
$('#Number').on('click',function() {
	running = false;
    $('#myNote').text("TEXTE");
});

**NoSmoking** · 08/08/2017, 09h32

Bonjour,
le plus simple reste d'utiliser la méthode clearTimeout ( iTimer), il te faut juste récupérer la variable iTimer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var iTimer;
 
function increment(i) {
  $('#myNote').text(i);
  if (i < 10000) {
    iTimer = setTimeout(function () {
      increment((i + 1));
    }, 1000);
  }
}

puis de la « killer » sur le click de l'autre bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#Number').on('click', function () {
  clearTimeout(iTimer);
  $('#myNote').text('TEXTE');
});

**SpaceFrog** · 08/08/2017, 11h25

oui ou encore plsu simplement avec un setInterval et un test de l'incrémzent qui déclenche un clearInterval ..

**Arsene12** · 09/08/2017, 03h11

Merci beaucoup,

en fait dans le programme que j'ai construit, c'est plus compliqué. Au lieu d'un compteur j'ai une série de fonctions imbriquées qui remplissent un tableau en allant chercher des éléments dans une base de données locale. À un moment j'ai une boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
while (i < j) {
 maFnct();
i++;         
};

Pour que le script s'arrête, en suivant vos conseils, j'ai déclaré une variable globale : var running = true; et inséré ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
while (i < j) {         
if (running === false) {
alert(running);
return false;  
}; 
 maFnct();
i++;         
};

Pour lancer l'arrêt du script, j'ai associé le code suivant à un bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#monBtn").on("click", function () {
  running = false;
});

Je n'obtiens aucun message d'alert en cliquant sur le bouton et le script s'exécute jusqu'au bout.

Pour être sûr que la fonction est toujours en train de s'exécuter, j'ai ajouté un setInterval() mais il n'a aucun effet:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
while (i < j) {
if (running === false) {
alert(running);
return false;  
}; 
setInterval(maFnct(), 5000);
i++;         
};

Si je mets setInterval("maFnct()", 5); le tableau ne s'affiche plus.

Si je mets maFnct().delay(8); seulement la première ligne du tableau s'affiche .

**Doksuri** · 09/08/2017, 08h24

1) le javascript va executer ton while(i<j) en un millieme de secondes... donc tu peux imaginer que le temps que tu cliques sur ton bouton, c'est deja trop tard
c'est pour ca que tu ne vois pas ton alert()
2) le 2eme argument pour le setInterval est en microsecondes (juste pour etre sur que tu le saches)

**NoSmoking** · 09/08/2017, 14h35

Ton moteur javascript étant occupé à plein temps le click sur le <button> ne sera effectivement pris en compte qu'à la fin de la fonction, il faut donc le « suspendre » pour rendre la main au navigateur.

Cela peut se faire en utilisant setTimeout pour mettre l'appel suivant dans la pile des appels.

Voici un exemple de mise en place du setTimeout :

Code html :

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
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Affichage sur fonction longue</title>
<meta name="Author" content="NoSmoking">
<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100%;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  margin: auto;
  max-width: 60em;
}
#liste {
  width: 20em;
  padding: 0 .5em;
  max-height: 20em;
  border: 1px solid #888;
  overflow: auto;
  list-style: none;
}
</style>
<body>
<main>
  <p>
  <button id="btn_start">Start</button>
  <button id="btn_stop">Stop</button>
  </p>
  <div id="info">...</div>
  <ul id="liste"></ul>
</main>
<script>
//////////////////////////////////////////////////////
var bStop;
var tabTimer = [];
 
function addLigne(where) {
  var oLi = document.createElement('LI');
  var num = where.children.length;
  oLi.appendChild(document.createTextNode('ligne ' + num));
  where.appendChild(oLi);
  where.scrollTop = where.scrollHeight;
}
 
function startActionLongue() {
  document.querySelector('#info').textContent = 'Fonction en cours...';
  // flag d'arrêt
  bStop = false;
  var iTimer = null;
  var oDest = document.querySelector('#liste');
  var i = 0;
  var nbLigne = 10000;
  while (i < nbLigne && !bStop) {
    // met sur la pile d'appel
    iTimer = setTimeout(function () {
      addLigne(oDest);
    }, 10);
    i += 1;
    // sauve le timer
    tabTimer.push(iTimer);
  }
}
 
function stopActionLongue() {
  document.querySelector('#info').textContent = 'Fonction stoppée !';
  // flag d'arrêt
  bStop = true;
  // supprime les timers
  while (tabTimer.length) {
    clearTimeout(tabTimer.pop());
  }
}
// actions sur boutons
document.querySelector('#btn_start').onclick = startActionLongue;
document.querySelector('#btn_stop').onclick = stopActionLongue;
</script>
</body>
</html>

Pour la formation : Cours et tutoriels pour apprendre JavaScript

**Arsene12** · 10/08/2017, 03h53

Merci beaucoup pour toutes ces infos. Pour quelqu'un qui n'est pas expert, c'est un peu compliqué à première vue. Mais je vais bien étudier le code que vous m'avez fourni et j'espère réussir à l'appliquer dans mon application. Ça me semble un point très important de savoir stopper un script en cours.

https://jsfiddle.net/3dc6p4w7/4/

Le code est simple et efficace effectivement, il me reste encore à bien le comprendre.

**Arsene12** · 11/08/2017, 07h28

J'essaye d'appliquer cette solution au programme que j'ai construit.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	   var i = arg1;		 
		while (arg1 < arg2) {   
           iTimer = setTimeout(function () {
               maFonction(i);
           },10);             
            maTable.push(iTimer);   
            i++;  
         }

maFonction(i) permet d'extraire des données d'une base et de les insérer dans une nouvelle ligne de la table maTable.

Avec ce code, je n'obtiens que la première ligne, la boucle ne s'exécute pas.

**NoSmoking** · 11/08/2017, 10h33

insérer dans une nouvelle ligne de la table maTable.

si maTable est un HTMLElement alors il y à un soucis avec cette action maTable.push(iTimer) !

**Arsene12** · 11/08/2017, 18h13

C'est bien ça, maTable est déclaré dans le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="maTable" align="center"></table>

et maFonction(i) utilise append pour insérer des nouvelles lignes.

**NoSmoking** · 11/08/2017, 19h05

C'est bien ça, maTable est déclaré dans le code HTML :

et donc !?!

**Arsene12** · 12/08/2017, 08h32

Et donc dans le code suivant il semble que ça fonctionne :

https://jsfiddle.net/3dc6p4w7/12/

Idem en rajoutant une table dans la Div principale : https://jsfiddle.net/3dc6p4w7/14/

Si on Clique sur Timer et que de suite après on clique sur Number, ça stoppe le script enclenché par le clic sur le bouton Timer.

Mais je comprends pas pourquoi, quand on Clique sur Timer, la durée de traitement est de 2 secondes au lieu de 30 et pourquoi les chiffres ne s'affichent pas toutes les 2 secondes les uns après les autres.

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
 
var tabTimer = [];
$('#Timer').on('click',function(e) {
var i = 1; 
while (i<=15) {
increment(i);
i++;
}
});
 
function increment(i) {
	if(i <= 15) {
  	iTimer = setTimeout(function() {
  		$('#myNote').append('<div id="fade'+i+'">'+i+'</div>');
      }, 2000);
	}
   tabTimer.push(iTimer);  
}
 
 
 $('#Number').on('click',function() { 
 while (tabTimer.length) {
    clearTimeout(tabTimer.pop());
  } 
	 $('#myNote').text("TEXTE");
});

En fait, si on remplace 15 par 150 000, on s'aperçoit que ça marche plus : https://jsfiddle.net/3dc6p4w7/18/

J'ai modifié le code mais ça marche toujours pas : https://jsfiddle.net/3dc6p4w7/19/

Pour 15 000 c'est bon, mais pas pour 150 000 : https://jsfiddle.net/3dc6p4w7/23/

Stopper l'action en cours et en exécuter une nouvelle

jQuery

Discussions similaires

Partager

Partager