Démarrer setInterval() à partir d'une fonction et le stopper dans une autre, impossible ?

**amateurprg** · 03/11/2019, 04h27

Salut

J'ai ce code où setInterval() fonctionne seulement si je ne lui donne pas une id, hors j'ai besoin d'une id pour le stopper avec clearInterval(id).
Donc tel que je montre mon code là, setInterval() se lance pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
function stop_clignote(cligne)
{
	clearInterval(cligne);
}
 
function place(pseudo)
{
	var cligne=setInterval("clignote()", 500);
	setTimeout(stop_clignote(cligne), 5000);
}

J'essaie de pas avoir de variables globales, il paraît que c'est pas propre

**psychadelic** · 03/11/2019, 05h10

oui, c'est vrai, les variables globales c'est pas propre, mais c'est pareil pour les fonctions : avoir des fonctions dans tous les sens c'est pas propre non plus.

autrement dit, cela implique de regrouper les fonctions et les variables qu'elles partagent en les plaçant dans un même objet.

**amateurprg** · 03/11/2019, 05h14

Salut Psychadelic

Merci de l'info !
Tu as une idée pour que setInterval() fonctionne avec une id ? Car je suis obligé d'avoir une fonction de lancement et une fonction d'arret, je peux pas les regrouper :/

EDIT : Aaaah je viens de comprendre ce que tu dis par regrouper, c'est comme tu dis les mettre dans un objet, moi j'avais compris les mettre en une seule fonction, tu as raison mais je sais pas faire comme tu dis :/

**javatwister** · 03/11/2019, 11h07

salut,

petit exemple:

- En cliquant sur "élargir", le div s'élargit... (setInterval)
- En cliquant sur "arrêter", euh... ça s'arrête... (clearInterval)

L'astuce est de déclarer un nom pour set et clear mais de ne l'activer qu'au moment où on en a besoin; bref, tu passes de "undefined" setInterval ou clearInterval quand tu veux activer ou désactiver le timer;
Je n'ai jamais trouvé de solution plus clean;

http://javatwist.imingo.net/interval2.htm

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
<!DOCTYPE>
<html> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<head>
 
<title>...</title>
 
<style>
#test {
        background-color:red;
        height:200px;
        width:15px;
</style>
 
</head>
<body>
<div id="test"></div>
 
<div>
	<button id="bout">élargir</button> <button id="bout2">arrêter</button>
</div>
 
<script>
const obj={
        large:15,
        plus:2,
        inter : undefined,
        stop : undefined
}
 
document.querySelector("#bout").addEventListener("click",(e)=>{
        e.target.disabled=true;
        obj.inter=setInterval(()=>{
                obj.large+=obj.plus;
                document.querySelector("#test").style.width=obj.large+"px"}
        ,500)}
,false);
 
document.querySelector("#bout2").addEventListener("click",()=>{
        document.querySelector("#bout").disabled=false;
        if(obj.inter!=undefined){
                obj.stop=clearInterval(obj.inter)
        }}
,false);
 
</script>
 
</body>
</html>

**psychadelic** · 03/11/2019, 15h51

Envoyé par javatwister

L'astuce est de ...

c'est pas vraiment mieux, ou disons c'est juste une petite partie du raisonnement :

cela implique de regrouper les fonction et les variables qu'elles partagent en les plaçant dans un même objet

et cela reste un ensemble de variables globales, elle sont juste dans un objet JS.

**javatwister** · 03/11/2019, 16h49

Moui; là tu définis 2 fonctions dans une autre, de même que tes 2 gestionnaires d’événement...; je ne trouve pas ça d'une propreté éclatante;

pour le reste, on est d'accord;

**Beginner.** · 03/11/2019, 22h57

Salut,

Envoyé par psychadelic

c'est pas vraiment mieux, ou disons c'est juste une petite partie su raisonnement :
et cela reste un ensemble de variables globales, elle sont juste dans un objet JS.

Je pense que c'est beaucoup mieux avec un objet que sans, ça limite la "pollution"... C'est en quelque sorte un espace de nom (ou namespace), regardez à ce propos ce tuto : https://falola.developpez.com/tutori...ript/namespace pour l’intérêt...

Dans le code de javatwister l'objet obj peut être vu comme un espace de nom, c'est bien sûr une variable globale mais ta fonction GestionInterface est aussi globale...

Envoyé par psychadelic

OK alors en closure c'est mieux ?

Comme tu l'as dit ta fonction GestionInterface est aussi une closure (et elle est aussi globale...).

Mais cette fois tu utilises une fonction anonyme auto-exécutable (IIFE) donc je suppose qu'une fois exécutée tout est nettoyé (puisqu'on n'a pas de référence vers cette fonction) donc ça doit être mieux question "pollution" mais je ne sais pas si on peut toujours faire ça... Par exemple si on a besoin d'exécuter plusieurs fois cette fonction il faudra bien en avoir une référence...

Sinon il y a les modules que je trouve bien pratique et d'ailleurs certains conseillent d'utiliser les modules plutôt que des fonctions auto-exécutables...

**psychadelic** · 03/11/2019, 15h42

Envoyé par amateurprg

EDIT : Aaaah je viens de comprendre ce que tu dis par regrouper, c'est comme tu dis les mettre dans un objet, moi j'avais compris les mettre en une seule fonction, tu as raison mais je sais pas faire comme tu dis :/

exemple simple et basique,

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>...</title>
</head>
<body>
  <div id="mon-Interface">
    compteur d'occurences = <span id="no-Occurence">0</span>
    <button id="bt-Start">Start</button>
    <button id="bt-Pause">Pause</button>
  </div>
 
  <script>
    function GestionInterface(refBtStart, refBtPause, refOccurenceN)
      {
      const btStart   = document.getElementById(refBtStart)
          , btPause   = document.getElementById(refBtPause)
          , dispOcc   = document.getElementById(refOccurenceN)
          
      let intervalID  = null
        , noOccurence = 0
 
      btStart.onclick = _Start
      btPause.onclick = _Pause
 
      function _Start()
        {
        btStart.disabled = true
        btPause.disabled = false
        intervalID = setInterval(_=>
          {
          dispOcc.textContent = ++noOccurence
          }
          , 1000)
        }
      function _Pause()
        {
        btStart.disabled = false
        btPause.disabled = true
        clearInterval(intervalID)
        }
      }
    
    GestionInterface('bt-Start','bt-Pause','no-Occurence')
 
  </script>
</body>
</html>

**amateurprg** · 03/11/2019, 15h47

Merci beaucoup à vous deux, c'est très sympa de m'avoir appris !!!

je mets en résolu

Démarrer setInterval() à partir d'une fonction et le stopper dans une autre, impossible ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager