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

**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;

**psychadelic** · 03/11/2019, 17h35

Envoyé par javatwister

je ne trouve pas ça d'une propreté éclatante;

OK alors en closure c'est mieux ?

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
<!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(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)
        }
      })('bt-Start','bt-Pause','no-Occurence')
  </script>
</body>
</html>

Envoyé par javatwister

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;

ben non, en javascript tout est objet, et la " fonction " GestionInterface est aussi un objet, le simple fait de l'appeler en crée une instance ( et au passage, c'est aussi une closure)

la preuve :

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>...</title>
  <style>
    div { border: 1px solid grey; border-radius: 1em; margin: 1em; padding: 1em; display: inline-block; white-space: nowrap;  }
  </style>
</head>
<body>
  <div id="mon-Interface-1">
    <h3>Interface-1</h3>
    compteur d'occurences = <span class="no-Occurence">0</span>
    <button class="bt-Start">Start</button>
    <button class="bt-Pause">Pause</button>
  </div>
 
  <div id="mon-Interface-2">
    <h3>Interface-2</h3>
    compteur d'occurences = <span class="no-Occurence">0</span>
    <button class="bt-Start">Start</button>
    <button class="bt-Pause">Pause</button>
  </div>
 
  <script>
    function GestionInterface (refInterface)
      {
      const btStart   = document.querySelector(`#${refInterface} .bt-Start`)
          , btPause   = document.querySelector(`#${refInterface} .bt-Pause`)
          , dispOcc   = document.querySelector(`#${refInterface} .no-Occurence`)
          
      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('mon-Interface-1')
    GestionInterface('mon-Interface-2')
  </script>
</body>
</html>

**javatwister** · 03/11/2019, 19h03

Oui c'est joli!

**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** · 04/11/2019, 00h06

Envoyé par Beginner.

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

ben ça aussi c'est faisable, mais c'est un autre sujet, et au passage c'est ainsi que fonctionnent nombre de librairies JS ; jQuery en tête.

**Beginner.** · 04/11/2019, 00h16

Envoyé par psychadelic

ben ça aussi c'est faisable, mais c'est un autre sujet...

Quand tu dis c'est faisable tu réponds à ce passage : "Par exemple si on a besoin d'exécuter plusieurs fois cette fonction il faudra bien en avoir une référence..." ?

Si oui alors oui c'est possible d'avoir une référence mais celle-ci sera globale comme l'objet obj du code de javatwister...

Envoyé par psychadelic

... et au passage c'est ainsi que fonctionnent nombre de librairies JS ; jQuery en tête.

Ben c'était une bonne solution à l'époque mais maintenant certains considèrent que les modules ES6 sont préférables (peut-être pas dans tous les cas, je ne sais pas...)...

En tous cas notamment pour éviter les variables globales c'est une bonne solution, elle est pratique en plus...

**psychadelic** · 04/11/2019, 00h42

Envoyé par Beginner.

Si oui alors oui c'est possible d'avoir une référence mais celle-ci sera globale comme l'objet obj du code de javatwister...

non, ce n'est pas comparable.

Sinon, stp arrête de juste considérer l’objet GestionInterface comme une fonction, j’ai déjà expliqué et prouvé (dans mon deuxième exemple) qu’il s’agissait aussi d’un objet.

Je veux bien reconnaître au passage que le la syntaxe JS est imparfaite et déroutante, mais en langage informatique c’est bel et bien un objet [ou plus exactement un prototype].

Quant à ta notion de globale, en informatique c’est un adjectif qui ne peut désigner que des variables; cela ne s’applique ni aux fonctions ni aux méthodes [ni aux prototypes]..

Dans mon [prototype] d'objet : GestionInterface les variables internes ne sont accessibles uniquement qu’a l’intérieur de l’instance de l'objet [prototype], et inaccessibles ailleurs (c’est aussi la raison pour laquelle on appelle aussi cela une closure)

Quant au système de Librairies basées sur ce principe, ce n’est pas parce que jQuery n’a plus le vent en poupe qu’on devrait mettre cette techno logicielle aux oubliettes

**Beginner.** · 04/11/2019, 01h12

Envoyé par psychadelic

Sinon, stp arrête de juste considérer l’objet GestionInterface comme une fonction, j’ai déjà expliqué et prouvé (dans mon deuxième exemple) qu’il s’agissait aussi d’un objet.

Je n'ai pas compris ta démonstration (éventuellement explique un peu plus...) mais de toute façon cela ne me pose pas de problème de considérer une fonction comme un objet*, on dit que tout est objet en JS lol...

* Les fonctions sont des objets Function...

Envoyé par psychadelic

Quant à ta notion de globale, en informatique c’est un adjectif qui ne peut désigner que des variables; cela ne s’applique ni aux fonctions ni aux méthodes [ni aux prototypes]..

Tu es sûr que cela ne s'applique pas aux fonctions ?

Locale ou globale c'est une question de portée (d'accessibilité) et cela concerne aussi les fonctions me semble-t-il...

Une fonction définie en dehors de toute fonction sera accessible comme peut l'être une variable globale...

Dans les deux cas (fonction ou variable) ce sera une propriété de l'objet window...

Et puisqu'une fonction est un objet pourquoi ne pourrait-elle pas être globale comme tout objet ?

Envoyé par psychadelic

Quant au système de Librairies basées sur ce principe, ce n’est pas parce que jQuery n’a plus le vent en poupe qu’on devrait mettre cette techno logicielle aux oubliettes

Non, je ne dis pas qu'il faut jeter cela aux oubliettes mais certains le pense...

Par exemple il y en un qui pose cette question : Do ES6 Modules make the case of IIFEs obsolete?.

Et dans ce lien ici il y a des chapitres comme Avoid IIFEs in ES6 et Replace an IIFE with a module .

Je ne dis pas qu'ils ont forcément raison dans tous les cas...

**psychadelic** · 04/11/2019, 02h01

Envoyé par Beginner.

Je n'ai pas compris ta démonstration (éventuellement explique un peu plus...) mais de toute façon cela ne me pose pas de problème de considérer une fonction comme un objet*, on dit que tout est objet en JS lol...

c'est de l'humour ?

la démonstration es la https://www.developpez.net/forums/d2.../#post11209585 (le second exemple en HTML)

Si d’après toi l'objet GestionInterface est de portée globale, duquel des 2 s'agit-il ? celui étant l'instance avec l'argument 'mon-Interface-1' ou celui utilisant 'mon-Interface-2',
dans le cas ou tu les considererai toutes deux comme globales comment comptes tu pouvoir les accéder ailleurs dans le code ?

**Beginner.** · 04/11/2019, 02h23

Envoyé par psychadelic

c'est de l'humour ?

Ben je suis sérieux quand je dis que cela ne me pose pas de problème de considèrer que les fonctions sont des objets, j'ai même précisé que les fonctions sont des objets Function...

Mais en même temps je voulais le dire d'une façon à détendre l'atmosphère...

Envoyé par psychadelic

la démonstration es la https://www.developpez.net/forums/d2.../#post11209585 (le second exemple en HTML)

Oui j'avais bien vu mais je ne comprends toujours pas en quoi cela démontre que la fonction GestionInterface est un objet...

Envoyé par psychadelic

Si d’après toi l'objet GestionInterface est de portée globale, duquel des 2 s'agit-il ? celui étant l'instance avec l'argument 'mon-Interface-1' ou celui utilisant 'mon-Interface-2',
dans le cas ou tu les considererai toutes deux comme globales comment comptes tu pouvoir les accéder ailleurs dans le code ?

- Alors déjà je parlais de ta fonction GestionInterface (premier code) et non de la fonction GestionInterface (second code)...

- Mais bon oui, pour moi, la fonction GestionInterface est globale, c'est une propriété de l'objet window, elle est donc accessible "partout" dans le programme...

- Ensuite la fonction GestionInterface est un objet, le nom GestionInterface est une référence à cet objet mais GestionInterface('mon-Interface-1') et GestionInterface('mon-Interface-2') ce sont deux exécutions de la fonction GestionInterface avec un paramètre différent...

On n'a pas deux fonctions mais une seule fonction et deux exécutions de celle-ci...

**psychadelic** · 04/11/2019, 02h31

ben non, en JS et parce que dans ce langage les fonctions sont des objets, elles restent des objets tant qu'ils ne sont pas utilisés, ce qui en langage informatique s'appelle une instanciation
et chaque instanciation peut être récupérée par le garbage collector a la fin de leur exécution.

si on appelle 3 fois la même fonction en JavaScript, on l'interpréteur réalise 3 instances différentes du même objet,
ce ne sont pas 3 exécutions de la même fonction avec des paramètres différent.

ça n'a rien à voir avec une variable, qui elle peut changer de valeur à tout moment et accessible selon la portée qu'on lui a donné.

ne pas confondre les notions d'objets et la notion d'instance.

si une instance reste persistante, se sont seulement les variables qu'elle contiens qui ont une portée mais pas les méthodes de l'objet, dire qu'une instance à une portée n'a pas de sens.

**Beginner.** · 04/11/2019, 02h44

Regarde ces passages tirés de ces liens : https://developer.mozilla.org/fr/doc...uide/Fonctions et https://developer.mozilla.org/fr/doc...ence/Fonctions :

La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.

En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets Function

.

**psychadelic** · 04/11/2019, 02h46

Envoyé par Beginner.

- Alors déjà je parlais de ta fonction GestionInterface (premier code) et non de la fonction GestionInterface (second code)

C'est quasiment le même code dans les 2 cas, j'ai juste changé les paramêtres en entrée

Envoyé par Beginner.

ce sont deux exécutions de la fonction GestionInterface avec un paramètre différent.

si ce sont 2 appels de la même fonction, comment expliques tu que la variable noOccurence inclue dans la cette unique fonction puisse afficher 2 valeurs différentes sur chacun des interfaces ?

ou comment expliques tu que les 2 boutons Start et Pause puissent continuer à être activables sans interférer entre les 2 interfaces ?

( j'ai remarqué que tu évite soigneusement d'utiliser le terme d'intanciation, pourquoi ?)

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

JavaScript

Discussions similaires

Partager

Partager