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

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/11/2019, 04h27
amateurprg

Démarrer setInterval() à partir d'une fonction et le stopper dans une autre, impossible ?
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:

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 ;)
03/11/2019, 05h10
psychadelic

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.
03/11/2019, 05h14
amateurprg

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 :/

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:

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>

Citation:

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:

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>

03/11/2019, 15h47
amateurprg

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

je mets en résolu ;)
03/11/2019, 15h51
psychadelic

Citation:

Envoyé par javatwister

L'astuce est de ...

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

Citation:

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.
03/11/2019, 16h49
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;

pour le reste, on est d'accord;

Citation:

Envoyé par javatwister

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

OK alors en closure c'est mieux ?

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

Citation:

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:

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>

03/11/2019, 19h03
javatwister

Oui c'est joli!
03/11/2019, 22h57
Beginner.

Salut,

Citation:

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

Citation:

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...
04/11/2019, 00h06
psychadelic

Citation:

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.
04/11/2019, 00h16
Beginner.

Citation:

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

Citation:

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...
04/11/2019, 00h42
psychadelic

Citation:

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
04/11/2019, 01h12
Beginner.

Citation:

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

Citation:

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 ?

Citation:

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...
04/11/2019, 02h01
psychadelic

Citation:

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 ?
04/11/2019, 02h23
Beginner.

Citation:

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

Citation:

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

Citation:

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...
04/11/2019, 02h31
psychadelic

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.
04/11/2019, 02h44
Beginner.

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 :

Citation:

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.

Citation:

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

.
04/11/2019, 02h46
psychadelic

Citation:

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

Citation:

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 ?)
04/11/2019, 03h05
Beginner.

Citation:

Envoyé par psychadelic

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.

Une fonction est un objet Fonction. Objet ou instance c'est pareil ici : Fonction est un constructeur, pour faire simple on pourrait faire le lien avec une class et dire qu'une fonction est une instance de Fonction...

Exemple : var sum = new Function('a', 'b', 'return a + b');...

Citation:

Envoyé par psychadelic

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,

Non je ne pense pas, il n'y aura qu'une instance...

C'est comme les autres objets que tu construis avec tel ou tel constructeur...

Citation:

Envoyé par psychadelic

ce ne sont pas 3 exécutions de la même fonction avec des paramètres différent.

Ben si justement et heureusement c'est un des intérêts des fonctions justement : on n'a qu'un seul ensemble d'instructions qu'on peut exécuter plusieurs fois...

Citation:

Envoyé par psychadelic

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

Ben il y a aussi des constantes (const) que l'on ne peut pas modifier et en plus on peut stocker la référence à une fonction dans une variable...
04/11/2019, 03h05
psychadelic

Citation:

Envoyé par Beginner.

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

Les références que tu donnes proviennent d'une traduction aproximative.
la page en Anglais spécifie bien

Citation:

Defining the function simply names the function and specifies what to do when the function is called.

et plus loin

Citation:

The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level.

cela indique juste que l'intansciation d'une fonction dépend de l'endroit ou on l'a déclaré, mais indique clairement qu'une fonction juste déclarée n'existe pas tant qu'elle n'est pas appelée
04/11/2019, 03h17
Beginner.

Citation:

Envoyé par psychadelic

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

Oui c'est vrai...

Citation:

Envoyé par psychadelic

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 ?

Ben en fait c'est parce que c'est une variable locale, à chaque appelle de la fonction tu auras une variable noOccurence différente même si c'est le même nom...

Citation:

Envoyé par psychadelic

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

Ce sont des boutons différents : chacun a sa propre balise HTML et ses propres gestionnaires d’évènements...
04/11/2019, 03h24
psychadelic

Citation:

Envoyé par Beginner.

Ben en fait c'est parce que c'est une variable locale, à chaque appelle de la fonction tu auras une variable noOccurence différente même si c'est le même nom...

oui justement, dans 2 instances différentes de l'objet GestionInterface, et ce qui prouve bien que cette "fonction" est multipliée dans la mémoire du système

Citation:

Envoyé par Beginner.

Ben si justement et heureusement c'est un des intérêts des fonctions justement : on n'a qu'un seul ensemble d'instructions qu'on peut exécuter plusieurs fois...

drole d'interprétation de la logique de codding !

l’intérêt des fonctions c'est effectivement qu'on les écrits qu'une seule fois pour autant d'exécutions qu'on souhaite, mais cela ne signifie pas pour autant qu'elles n'existent qu'en un seul exemplaire dans la mémoire du système hôte (en fait l'optimisation de code duplique juste leur partie data, et éventuellement les partie code si les duplicatas fonctionnent en concurrence, ce qui peut souvent arriver en JS)

Citation:

Envoyé par Beginner.

Ben il y a aussi des constantes (const) que l'on ne peut pas modifier et en plus on peut stocker la référence à une fonction dans une variable...

c'est une autre histoire, et on peut aussi figer les variables en JS pour les rendre non modifiables

Citation:

Envoyé par psychadelic

Les références que tu donnes proviennent d'une traduction aproximative.
la page en Anglais spécifie bien

Citation:

Defining the function simply names the function and specifies what to do when the function is called.

et plus loin

Citation:

The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level.

cela indique juste que l'intansciation d'une fonction dépend de l'endroit ou on l'a déclaré, mais indique clairement qu'une fonction juste déclarée n'existe pas tant qu'elle n'est pas appelée

Ben la traduction : "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. " est bonne...

Si une fonction est déclarée à l'intérieur d'une autre, sa portée c'est la fonction dans laquelle elle est déclarée...
Sinon (c'est-à-dire si elle est déclarée en dehors de toute fonction) sa portée c'est le programme tout entier.

Pour moi c'est comme pour les variables...

Citation:

Envoyé par psychadelic

oui justement, dans 2 instances différentes de l'objet GestionInterface, et ce qui prouve bien que cette "fonction" est multipliée dans la mémoire du système

pour moi (je sais je me répète) il n'y a qu'une instance et deux exécutions...

Tu connais l’intérêt du prototype, cela permet d'éviter qu'une "fonction" soit multipliée dans la mémoire du système, non ?

Cela me rappelle ce fil : Demande d'explication sur les prototypes

Et cette réponse par exemple (notamment le passage en rouge) :
Citation:
Envoyé par SylvainPV
Déclaré dans le constructeur, ça devient une propriété de l'objet. Donc pour 10 machines, il y aura 10 fonctions M_methode différentes, qui seront tout à fait équivalentes mais pourtant bien distinctes. Un peu comme le nombre de pièces, tu peux avoir deux machines avec 40 pièces mais ce nombre est pourtant bien spécifique à chaque machine (si tu ajoutes 10 pièces à la première, la seconde aura toujours 40 pièces)

Déclaré dans le prototype, ça devient une propriété du prototype, donc une propriété partagée par toutes les instances. Donc ce sera la même fonction partout. On peut mettre ce qu'on veut dans le prototype, pas forcément une fonction. Par exemple un chiffre, le prix de la machine:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function Machine(nbPieces){ this.nbPieces = nbPieces; } Machine.prototype.prix = 100; var machine1 = new Machine(40), machine2 = new Machine(40); console.log(machine1.prix, machine2.prix); // 100, 100 Machine.prototype.prix = 120; console.log(machine1.prix, machine2.prix); // 120, 120 machine1.prix = 150; // prix devient une propriété de l'objet machine1 et non plus du prototype console.log(machine1.prix, machine2.prix); // 150, 120
#2

04/11/2019, 05h27
amateurprg

Salut,

C'est très interessant cette discussion ;)

C'est pas de mon niveau, mais je comprend que il y a débat sur : Si une fonction est située en un seul endroit de la mémoire ou en deux endroits ?
C'est ça ?

Parce que si c'est ça, en étant logique, si nous on a besoin du service d'une fonction, le microprocesseur va peut-être faire une copie de la fonction, histoire de pas changer ses valeurs d'origine à cause de notre utilisation, et alors il va se servir de la copie, enfin je crois que ça devrait etre comme ça, parce que nous si quelqu'un nous demande de lui prêter un truc on a forcément un peu la peur s'il va le perdre ou l'abimer non ? Bon le probleme avec cet exemple c'est que dans la vie on peut pas facilement copier notre objet pour prêter la copie, à part pour des clefs d'appartement ou de boites aux lettres, des trucs comme ça, mais l'ordi lui ces des données dans la mémoire alors il peut facilement faire des copies et pas autoriser qu'on touche à l'original, ça doit etre ça le fonctionnement peut-être.

ça serait bien pour que j'apprenne que on mette ce débat dans un post pour que les autres le voient et qu'on aie des réponses différentes, c'est cool comme question ;)
04/11/2019, 15h20
psychadelic

Citation:

Envoyé par Beginner.

Pour moi c'est comme pour les variables...
/../
pour moi (je sais je me répète) il n'y a qu'une instance et deux exécutions...
/../
Tu connais l’intérêt du prototype, cela permet d'éviter qu'une "fonction" soit multipliée dans la mémoire du système, non ?

Bon, dernière tentative,

1) Pour moi c'est comme pour les variables...

si tu veux comparer les objets avec quelque chose, serait plutôt les types, soit :
quand on déclare un objet (ou une fonction-objet) c'est un peu comme si on déclarait directement un nouveau type d'éléments.

et les types d'éléments comme les Number, ou string, ou array n'ont que faire de la notion de portée.
d'ailleurs Javascript fournit d'autres objets directement comme l'objet Math

Donc dire que le type Number ou le type String, ou même l'objet Math ont une portée n'ont aucun sens.

si la déclaration d'un nouveau type est faite au niveau zéro d'un programme et qu'une variable utilisant ce type est crée dans un niveau 15, la portée de cette variable est bien au niveau 15 et non au niveau zéro de la déclaration de son type.
et c'est pareil avec les variables crées à partir d'un objet.

2) pour moi (je sais je me répète) il n'y a qu'une instance et deux exécutions...

non, il y a deux instances, et dans chacune de ses instances il y une variable noOccurence ayant la valeur courante affichées chacune sur leur interface correspondant.

Est-ce que tu à essayé de faire tourner mon 2em exemple ? ( https://www.developpez.net/forums/d2.../ )
appuyé sur les diffrents Start / Pause de chacun des interface, et visualisé que les valeurs affichées évoluent indifféremment l'une de l'autre ?
à part le fait qu'elles évoluent chacune dans un espace mémoire différent, ton idée d'un unique espace mémoire pour les deux est irréaliste.

ou alors si tu a une solution pour qu'une variable interne puisse changer de valeur sur 2 interfaces différents sans être dupliquée en mémoire, faudrait le breveter parce que ça rapporterai des milliards.

3)Tu connais l’intérêt du prototype, cela permet d'éviter qu'une "fonction" soit multipliée dans la mémoire du système, non ?

Justement un prototype par nature c'est un peu comme un maquette taille réelle et quasi opérationnelle qui est rangée dans l’atelier et qui sert de référence pour en réaliser des copies utilisables.
Donc oui, on parle de multiplication dans la mémoire du système.

au passage tu remarquera que le mot prototype est formé par : https://www.cnrtl.fr/definition/prototype
-proto- : premier
-type- : comme type de variable (String / Number, ....) comme je l'explique au premier point.

---
Il y a la documentation et il y a la réalité
- La documentation est réalisée par des rédacteurs techniques (voir par les codeurs eux-même) mais cela reste du texte sujet à interprétation.
- la réalité, c'est le code, j'ai cru lire que les interpréteur JS sont écrit en C. cela veut dire que derrière la déclaration d'une fonction, puis dans sont utilisation,
il y a un morceau de code en C natif qui en fait la préparation.
pour les interpréteurs JS, pas besoin de rechercher les codes sources tu l'a toi même écrit,
la techno Objet est basé sur la technique des prototypes, qui est justement une technique de duplication en mémoire.
04/11/2019, 16h44
amateurprg

En fait y en a un qui dit que dans la mémoire y a deux fonctions équivalentes mais séparées, chacune avec ses valeurs de variables,
et l'autre qui dit que y a une seule fonction mais aussi sa copie qui a ses propres valeurs de variables.

je dis l'un et l'autre parce que j'arrive pas à voir qui dit : "deux instances" et qui dit une instance et sa copié, surtout que d'aprés ce que j'ai lu sur le net, une instance c'est déjà une sorte de copie, sauf que on peut modifier ses variables sans que sa modifie l'originale.
Moi je comprend pas où est la différence entre ces deux avis, parce que dans la mémoire s'il y a deux fonctions du même nom mais avec des valeurs différentes, ça fait deux emplacements de mémoire, ça revient au même je crois non ?
(ouais j'essaie de suivre et comprendre, lol, pas facile)
04/11/2019, 18h02
Beginner.

Salut,

Citation:

Envoyé par psychadelic

Bon, dernière tentative,

Ben c'est une discussion et il est vrai qu'on a des avis différents mais justement cela peut être instructif de connaitre les différents avis pour se faire sa propre opinion...

Bon désolé si je t'ai pris la tête, merci de ta patience...

Citation:

Envoyé par psychadelic

si tu veux comparer les objets avec quelque chose, serait plutôt les types,...

Je ne cherche pas à comparer les objets à quelque chose...

Je pensais avoir été clair mais bon je vais essayé de résumer :

1 - A un moment de la discussion j'ai parlé de "fonction globale" et tu n'étais pas d'accord apparemment, pour toi seules les variables peuvent être globales...

Alors c'est là que j'ai expliqué ce que j'entendais par "fonction globale" et j'ai fait une analogie avec les variables :

Locale ou globale qu'est-ce que cela signifie finalement ? Pourquoi fait-on cette distinction ? Eh bien pour moi, c'est une question de portée (d'accessibilité) et de ce point de vue-là cela concerne aussi les fonctions...

En effet on voit bien (on peut le tester si besoin est pour s'en convaincre) qu'une fonction a une portée (accessibilité) et que celle-ci dépend de l'endroit où elle est déclarée :

1- Si une fonction est déclarée à l'intérieur d'une autre, sa portée c'est la fonction dans laquelle elle est déclarée...
2- Sinon (c'est-à-dire si elle est déclarée en dehors de toute fonction) sa portée c'est le programme tout entier.

et par analogie avec la portée des variables et/ou par commodité on peut parler de fonction locale ou interne ou enfant pour le cas 1 et de fonction globale, externe ou parent pour le cas 2.

Peut-être ce serait mieux de parler de "fonction à portée globale" ?

C'est juste une question de terminologie...

2 - Un autre point commun avec les variables :

Les fonctions globales (déclarées en dehors de toute fonction) sont des propriétés de l'objet window tout comme les variables globales...

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

Citation:

Envoyé par psychadelic

et les types d'éléments comme les Number, ou string, ou array n'ont que faire de la notion de portée.
...
Donc dire que le type Number ou le type String, ou même l'objet Math ont une portée n'ont aucun sens.

Ok mais pour ce qui de la portée je parlais des fonctions comme résumé ci-dessus...

Citation:

Envoyé par psychadelic

non, il y a deux instances, et dans chacune de ses instances il y une variable noOccurence ayant la valeur courante affichées chacune sur leur interface correspondant.

Ben j'avais déjà répondu à ça : "Ben en fait c'est parce que c'est une variable locale, à chaque appelle de la fonction tu auras une variable noOccurence différente même si c'est le même nom..."

C'est une question compliquée à vérifier car JS n'est pas un langage compilé... Mais j'ai cru comprendre qu'à chaque exécution de la fonction l’interpréteur "crée" un nouveau contexte d’exécution et chaque contexte d’exécution a son propre "Call Object" dans lequel sont définies les variables locales (ces dernières sont des propriétés du "Call Object").

Cela fait penser à la pile (stack)...

Citation:

Envoyé par psychadelic

ou alors si tu a une solution pour qu'une variable interne puisse changer de valeur sur 2 interfaces différents sans être dupliquée en mémoire, faudrait le breveter parce que ça rapporterai des milliards.

Ben justement il n'y a pas qu'une variable mais deux comme expliqué ci-dessus...

Citation:

Envoyé par psychadelic

Est-ce que tu à essayé de faire tourner mon 2em exemple ? ( https://www.developpez.net/forums/d2.../ )

Oui et c'est un joli code !
04/11/2019, 18h11
Beginner.

Citation:

Envoyé par amateurprg

Moi je comprend pas où est la différence entre ces deux avis, parce que dans la mémoire s'il y a deux fonctions du même nom mais avec des valeurs différentes, ça fait deux emplacements de mémoire, ça revient au même je crois non ?

Pour moi il n'y a qu'une fonction, le nom de la fonction est une référence.

Le langage JS est langage interprété on ne peut pas vérifier comme on peut le faire par exemple en C\C++...

Toi qui parlait de microprocesseur ben justement, en assembleur on peut vérifier et on peut très bien avoir une seule fonction en mémoire et des paramètres et des variables locales différents à chaque appel. Ils seront stocker dans la pile ou dans des registres ou...

une même fonction peut travailler avec des données temporaires (durée de vie limitée) différentes à chaque appel...
04/11/2019, 19h02
amateurprg

ah tiens, c'est vrai ça, qu'une fonction peut très bien enregistrer deux valeurs différentes en mémoire en utilisant leur adresse, j'avais fait ça en assembleur sur le programme debug (du dos) pour faire un programme de mots de passes pour mon pc.
04/11/2019, 20h24
Beginner.

Citation:

Envoyé par amateurprg

ah tiens, c'est vrai ça, qu'une fonction peut très bien enregistrer deux valeurs différentes en mémoire en utilisant leur adresse, j'avais fait ça en assembleur sur le programme debug (du dos) pour faire un programme de mots de passes pour mon pc.

Aujourd'hui Arduino a la cote, on pourrait tester un code en C/C++ et regarder le code assembleur produit par le compilateur...
05/11/2019, 15h51
Dave Hiock
Quand je vois le « rang -> expert confirmé » je me pose deux questions
- Expert en quoi ?
- … plus loin
Citation:

Envoyé par psychadelic

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]

En ce qui concerne le vocabulaire, c’est du n’importe quoi euh ! pardon une interprétation très personnelle et erronée de la réalité du JavaScript.

Citation:

Envoyé par psychadelic

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.

Citation:

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 ?

Visiblement tu n’as pas ou mal compris le fonctionnement interne d’un moteur JavaScript, par exemple as-tu entendu parler du contexte d’exécution ?

Citation:

Envoyé par psychadelic

oui justement, dans 2 instances différentes de l'objet GestionInterface, et ce qui prouve bien que cette "fonction" est multipliée dans la mémoire du système

Phrase bateau … dans la mémoire du système ne signifie pas grand-chose … environnement lexical, contexte d'exécution et la pile d'exécution …

Citation:

Donc oui, on parle de multiplication dans la mémoire du système.

au passage tu remarquera que le mot prototype est formé par : https://www.cnrtl.fr/definition/prototype
-proto- : premier
-type- : comme type de variable (String / Number, ....) comme je l'explique au premier point.

D’autres ont une définition bien moins étymologique et interprétée que la tienne comme par exemple.

Citation:

Envoyé par psychadelic

Il y a la documentation et il y a la réalité
- La documentation est réalisée par des rédacteurs techniques (voir par les codeurs eux-même) mais cela reste du texte sujet à interprétation.
- la réalité, c'est le code, j'ai cru lire que les interpréteur JS sont écrit en C. cela veut dire que derrière la déclaration d'une fonction, puis dans sont utilisation,
il y a un morceau de code en C natif qui en fait la préparation.

donc la vérité est chez toi :ptdr:

Citation:

Envoyé par psychadelic

la techno Objet est basé sur la technique des prototypes, qui est justement une technique de duplication en mémoire.

:koi:

Pour finir il est vrai qu’en lisant ta signature on peut comprendre tes points de vue.

J’en suis à me poser la deuxième question, comment developpez attribue le « rang », en l’occurrence donc « expert confirmé », qui apparaît en dessous de nom de l’auteur du post.

Merci à Beginner pour le lien vers cette autre discussion Demande d'explication sur les prototypes, ce qui rassure sur les compétences présentent sur developpez.

PS : Bon courage Beginner :)
05/11/2019, 18h25
amateurprg

Citation:

Quand je vois le « rang -> expert confirmé » je me pose deux questions

Bein te les pose plus, c'est juste un rang de forum à mon avis ;)
Moi je regarde jamais ça, ce que je regarde c'est les réponses qui sont postées, et des experts c'est vrai qu'il y en a plein sur developpez, beaucoup ont fait des applications connues et utiles (SFML, Lazarus,etc) ou des tutos très bien faits, etc...
05/11/2019, 18h48
ProgElecT

Salut
Pour information à Dave Hiock et amateurprg,
Le grand mode d'emploi du forum, à lire si vous souhaitez tout savoir !
05/11/2019, 19h15
amateurprg

Merci progElect je regarde ;)

Bein voilà, c'est un rang forum qui dépend des points reçu.
Mais bon, comme on peut recevoir des points sur un post pour un message qui n'est pas de la programmation, le titre donné est pas forcément dû à la programmation.
Moi je me fie juste aux réponses données, et on voit bien que les pros sont légions ici, d'ailleurs juste en quelques jours j'ai appris plein de choses que j'aurais mis des mois à apprendre ailleurs.
07/11/2019, 11h18
Dave Hiock

Citation:

Envoyé par ProgElecT

Pour information à Dave Hiock et amateurprg

Merci, c'est une page que je n'avais pas lue lors de mon parcours initiatique.

Citation:

Envoyé par amateurprg

Moi je me fie juste aux réponses données,

Certes mais dans le cas présent tu penses apprendre des choses de la part « expert confirmé » alors que c'est n'importe quoi, tu me diras comme souvent sur internet, il faut faire le tri.

Citation:

Envoyé par amateurprg

... et on voit bien que les pros sont légions ici,

Je te confirme, j'ai lu d'excellentes choses sur ce site, c'est sûrement pour cela que j'y reviens quand j'ai le temps.

Citation:

Envoyé par Beginner.

on ne peut pas vérifier comme on peut le faire par exemple en C\C++...

On peut voir, plus ou moins, ce qui ce passe en mémoire avec les outils dont dispose les navigateurs.
Par exemple sous Firefox, il faut ouvrir la console, aller dans l'onglet Mémoire, Capturer un instantané, et dans les filtres, Afficher les Agrégats avec option Regrouper selon: CallStack, et plein d'autres chose encore.
C'est à peu près la même chose sur Chrome en faisant un snapshot de la head et en filtrant avec Function.

Je finirais par une autre question, mais je n'attend pas de réponse, en quoi les (points+) attribués à un « expert confirmé » qui raconte n'importe et les (points-) attribués à Beginner. sont-ils légitimes, me concernant je me doute :mrgreen:, on n'est pas sur fadebook à moins que ... ?
07/11/2019, 11h36
Invité

@Dave Hiock

Bonjour,
de ce que j'ai pu voir de tes dernières interventions, tu te contentes de critiquer les autres, sans apporter d'éléments constructifs.
Ça n'a aucun intérêt.
Si c'est là ta seule "contribution" à la communauté DVP, c'est dommage (Inscrit en juin 2019 - Messages :15 !)
Tu as certainement mieux à dire, non ?
Que tu ne sois pas d'accord avec tel ou tel intervenant est ton droit, mais dans ce cas, alimente le débat avec tes propres arguments.
07/11/2019, 12h48
Dave Hiock

Citation:

Envoyé par jreaux62

de ce que j'ai pu voir de tes dernières interventions,
...
tu te contentes de critiquer les autres, sans apporter d'éléments constructifs.
...
Que tu ne sois pas d'accord avec tel ou tel intervenant est ton droit, mais dans ce cas, alimente le débat avec tes propres arguments.

il me semble pourtant en avoir apporté sous la forme.

Citation:

par exemple as-tu entendu parler du contexte d’exécution
...
environnement lexical, contexte d'exécution et la pile d'exécution

Ce sont des bases pourtant à connaitre quand on aborde le sujet, que veux tu que je dise de plus.

Citation:

Envoyé par jreaux62

Si c'est là ta seule "contribution" à la communauté DVP, c'est dommage (Inscrit en juin 2019 - Messages :15 !)

Ben il faut bien commencer un jour et comme je vois que la plupart de mes quelques interventions ont été « moinsées » je dois admettre que je n'ai pas encore bien saisi le fonctionnement de certains des forums de ce site.

1 pièce(s) jointe(s)

Salut,

Voici un exemple qui peut surprendre (comme l'exemple de code de psychadelic) :
Citation:
Voici un cas qui pourrait vous surprendre :
Code:

1 2 3 4 5 6 7 8 9 10 11 var variable = "globale"; function fonctionParente() { var variable = "locale"; function fonctionFille() { print(variable); } return fonctionFille; } var fille = fonctionParente(); fille();
fonctionParente renvoie sa fonction interne et le code en bas de appelle cette fonction. Même si fonctionParente a fini de s’exécuter à ce moment-là, l’environnement local dans lequel variable a la valeur locale existe toujours, et fonctionFille continue de l’utiliser. Ce phénomène s’appelle une fermeture lexicale (ou closure en anglais).

La portée lexicale permet non seulement de rendre très facile et rapide à discerner dans quelle partie d’un programme une variable sera disponible, mais aussi de « synthétiser » des fonctions. En utilisant certaines des variables venant d’une fonction l’englobant, une fonction interne peut être amenée à faire des choses différentes. Imaginez que nous ayons besoin de plusieurs fonctions différentes mais similaires, l’une d’entre elles ajoutant 2 à son argument, l’autre ajoutant 5 et ainsi de suite.
Code:

1 2 3 4 5 6 7 8 9 10 function creerFonctionAjouter(quantite) { function ajouter(nombre) { return nombre + quantite; } return ajouter; } var ajouterDeux = creerFonctionAjouter(2); var ajouterCinq = creerFonctionAjouter(5); show(ajouterDeux(1) + ajouterCinq(1));
Pour bien comprendre, vous ne devez pas considérer que les fonctions empaquettent seulement des calculs, mais aussi un environnement. Les fonctions globales s’exécutent simplement dans l’environnement global, c’est assez évident. Mais une fonction définie à l’intérieur d’une autre fonction conserve l’accès à l’environnement existant dans cette fonction à l’instant où elle a été définie.

Par conséquent, la fonction ajouter de l’exemple au-dessus, qui est créée lorsque creerFonctionAjouter est appelée, capture un environnement dans lequel quantite a une certaine valeur. Il empaquette cet environnement avec le calcul return nombre + quantite à l’intérieur d’une valeur qui est alors retournée depuis la fonction extérieure.

Lorsque cette fonction renvoyée (ajouterDeux ou ajouterCinq) est appelée, un nouvel environnement ― dans lequel la variable nombre a une valeur ― est créé comme un sous-environnement de l’environnement capturé (dans lequel quantite a une valeur). Ces deux valeurs sont ajoutées, et le résultat est renvoyé.

Au-delà du fait que différentes fonctions peuvent contenir des variables de même nom sans qu’elles ne se mélangent...
Source : https://fr.eloquentjavascript.net/chapter3.html

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 20h30.