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 :

Comportement de clearInterval(myVar) sur smartphone


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Comportement de clearInterval(myVar) sur smartphone
    Bonjour
    Je développe une petite appli (c++) sur ESP8266 interfacée par wifi sur smartphone. Mon problème est que l'instruction "onmouseout = "clearInterval(myVar);" placée dans un button ne réagit pas sur le smartphone (Android + Firefox) alors que "onmouseover = "myVar=setInterval(delais3, 300);" fonctionne parfaitement.
    ci-dessous la page web
    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
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
     
    <html>
      <head>
        <title>ESP8266 onduleur</title>
        <style>
                    body { background-color: lightblue; font-family: Comic Sans MS, Arial; Color: #000088;text-align: center }      
                    td {text-align: center;}
                    .divbtn { position:absolute; top: 50px; right: 50px;}
                    .btn {width:85px;height:85px;background:#cc0000;font: 18px Comic Sans  MS;border-radius:50%;border:5px;color:#fff;cursor:pointer}
                    .btn:hover{background:#ffffff;color: #cc04c2;}
                    table, th, td {border: 1px solid black; border-collapse: collapse;}
                    #cadre{padding-bottom:19px;padding-left: 1px;position: relative;}
                    .inforp {background-color: grey;color:white;font-family:verdana;width: 30px;position: absolute;}
                    input {width: 2.5em;font-size: 1.5em;}
        </style>
      </head>
      <body onload="initVar()">
        <h1>Variateur de fréquence<br>sinusoïdal monophasé pour moteur asynchrone</h1>
    	<h2>Modulation à largeur d'impulsion<br/>&nbsp;<br/></h2>
        <form method="post" action="postplain" >
    	<table border="border:1px solid black" width="90%" align="center">
    		<tr>
    			<td colspan="3"><h3>Fréquence:</h3></td>
    		</tr>
    		<tr>
    			<td width="10%">
    				<input type="button" value="-" onclick="decalefreq(a=-1)" onmouseover = "myVar=setInterval(delais2, 200);" onmouseout = "clearInterval(myVar);"/>
    			</td>
    			<td id="cadre">
    				<p class="inforp" id="freq">0</p>
    			</td>	
    			<td width="10%">
    				<input type="button" value="+" onclick="decalefreq(a=1)" onmouseover = "myVar=setInterval(delais1, 200);" onmouseout = "clearInterval(myVar);"/>
    			</td>
    		</tr>
    		<tr>
    			<td colspan="3">
    				<h3>Temps de démarrage:</h3>
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<input type="button" value="-" onclick="decaleramp(a=-1)" onmouseover = "myVar=setInterval(delais4, 300);" onmouseout = "clearInterval(myVar);"/>
    			</td>
    			<td id="cadre">
    				<p class="inforp" id="ramp">0</p>
    			</td>
    			<td>
    				<input type="button" value="+" onclick="decaleramp(a=1)" onmouseover = "myVar=setInterval(delais3, 300);" onmouseout = "clearInterval(myVar);"/>
    			</td>
    		</tr>
    	</table>
    	<div class="divbtn"><input type="submit" class="btn" value="Valider"/></div>
    	<input type="hidden" value="10" name="frequence"/>
    	<input type="hidden" value="2" name="rampe"/>
        </form>
    	<script>
                    var y1;
                    var y2;
                    var elmtfreq;
                    var elmtramp;
                    var x = 0;
                    var r = 0;
                    var myVar;
                    function initVar() {
                            y = parseInt(window.innerWidth,10)*0.8;
                            y1 = Math.round(y/75);
                            y2 = Math.round(y/6);
                            elmtfreq = document.getElementById("freq");
                            elmtramp = document.getElementById("ramp");
                            a = document.getElementsByName("frequence")[0].value;
                            decalefreq(a=10);
                            a = document.getElementsByName("rampe")[0].value;
                            decaleramp(a=2);
                            }
                    function decalefreq() {
                            x += (y1*a);
                            if(x > -1 & x < (y1*61)){elmtfreq.style.left = x + "px";}
                            x = parseInt(elmtfreq.style.left);
                            document.getElementById("freq").textContent = x/y1;
                            document.getElementsByName("frequence")[0].value = x/y1;}
                    function decaleramp() {
                            r += (y2*a);
                            if(r > -1 & r < (y2*6)){elmtramp.style.left = r + "px";}
                            r = parseInt(elmtramp.style.left);
                            document.getElementById("ramp").textContent = r/y2;
                            document.getElementsByName("rampe")[0].value = r/y2;}
                    function delais1(){decalefreq(a=1);}
                    function delais2(){decalefreq(a=-1);}
                    function delais3(){decaleramp(a=1);}
                    function delais4(){decaleramp(a=-1);}
            </script>
      </body>
    </html>

    Si vous pouviez m'en dire plus
    merci

  2. #2
    Membre expert
    les evenements *mouse* n'existent pas sur telephone

    il faudra que tu utilises les evenements *touch* developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Touch_events
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  3. #3
    Futur Membre du Club
    Bonjour

    J'ai repris ma fonction js en y ajoutant les évènements "touch" mais après test c'est pire. N'étant pas expert en la matière et ne faisant plus de programmation depuis longtemps dites moi si ce que j'y ai ajouté semble OK.
    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
     
    window.addEventListener('load', function(){
    		var d1 = document.getElementById('d1')
    		var d2 = document.getElementById('d2')
    		var d3 = document.getElementById('d3')
    		var d4 = document.getElementById('d4')
    		d1.addEventListener('touchstart', function(e){myVar=setInterval(delais1, 200);e.preventDefault()}, false)
    		d1.addEventListener('touchend', function(e){clearInterval(myVar);e.preventDefault()}, false)
    		d2.addEventListener('touchstart', function(e){myVar=setInterval(delais2, 200);e.preventDefault()}, false)
    		d2.addEventListener('touchend', function(e){clearInterval(myVar);e.preventDefault()}, false)
    		d3.addEventListener('touchstart', function(e){myVar=setInterval(delais3, 200);e.preventDefault()}, false)
    		d3.addEventListener('touchend', function(e){clearInterval(myVar);e.preventDefault()}, false)
    		d4.addEventListener('touchstart', function(e){myVar=setInterval(delais4, 200);e.preventDefault()}, false)
    		d4.addEventListener('touchend', function(e){clearInterval(myVar);e.preventDefault()}, false)		
    		}, false)


    d1 à d4 correspondant aux boutons
    Merci

  4. #4
    Futur Membre du Club
    Bonjour
    Après recherche j'ai trouvé que c'est la variable ID d'intervalle myVar qui pose problème car elle n'est pas accessible lors de l'évènement, il faut en créer une dans la Fct d'initialisation des évènements.
    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
     
    window.addEventListener('load', function(){
    		var d1 = document.getElementById('d1')
    		var d2 = document.getElementById('d2')
    		var d3 = document.getElementById('d3')
    		var d4 = document.getElementById('d4')
    		var a
    		d1.addEventListener('touchstart', function(e){
    			a=setInterval(delais1, 200)
    			e.preventDefault()}
    			, false)
    		d1.addEventListener('touchend', function(e){
    			clearInterval(a)
    			e.preventDefault()}
    			, false)
    		d2.addEventListener('touchstart', function(e){
    			a=setInterval(delais2, 200)
    			e.preventDefault()}
    			, false)
    		d2.addEventListener('touchend', function(e){
    			clearInterval(a)
    			e.preventDefault()}
    			, false)
    		d3.addEventListener('touchstart', function(e){
    			a=setInterval(delais3, 300)
    			e.preventDefault()}
    			, false)
    		d3.addEventListener('touchend', function(e){
    			clearInterval(a)
    			e.preventDefault()}
    			, false)
    		d4.addEventListener('touchstart', function(e){
    			a=setInterval(delais4, 300)
    			e.preventDefault()}
    			, false)
    		d4.addEventListener('touchend', function(e){
    			clearInterval(a)
    			e.preventDefault()}
    			, false)		
    		}, false)

  5. #5
    Futur Membre du Club
    Smartphone comportement erratique de "touch..."
    Bonjour
    Je reviens vers vous car je rencontre un autre pb, c'est le comportement erratique de la fonction touchstart et touchend sur le smartphone.
    En effet une fois la page chargée l'évènement (touchstart) se déclenche aléatoirement ou pas du tout et quelque fois il se déclenche puis après un touchend c'est retour à la case départ comme si il n'y avait pas en de touch.
    ci joint le code au cas ou
    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
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    <html>
    <head>
    <title>ESP8266 onduleur</title>
    <style>
    body { background-color: lightblue; font-family: Comic Sans MS, Arial; Color: #000088;text-align: center }
    td {text-align: center;}
    .divbtn { position:absolute; top: 50px; right: 50px;}
    .btn {width:85px;height:85px;background:#cc0000;font: 18px Comic Sans  MS;border-radius:50%;border:5px;color:#fff;cursor:pointer}
    .btn:hover{background:#ffffff;color: #cc04c2;}
    table, th, td {border: 1px solid black; border-collapse: collapse;}
    #cadre{padding-bottom:19px;padding-left: 1px;position: relative;}
    .inforp {background-color: grey;color:white;font-family:verdana;width: 30px;position: absolute;}
    input {width: 2.5em;font-size: 1.5em;}
    </style>  </head>  <body onload="initVar()">
    <h1>Variateur de fréquence<br>sinusoïdal monophasé pour moteur asynchrone</h1>  <h2>Modulation à largeur d'impulsion<br/>&nbsp;<br/></h2>
    <form method="post" action="postplain" >  <table border="border:1px solid black" width="90%" align="center">
    <tr>
      <td colspan="3"><h3>Fréquence:</h3></td>
    </tr>
    <tr>
      <td width="10%">
     
    <input type="button" value="-" id="d2" onclick="decalefreq(a=-1)" onmouseover = "myVar=setInterval(delais2, 200);" onmouseout = "clearInterval(myVar);"/>
      </td>
      <td id="cadre">
     
    <p class="inforp" id="freq">0</p>
      </td>
      <td width="10%">
     
    <input type="button" value="+" id="d1" onclick="decalefreq(a=1)" onmouseover = "myVar=setInterval(delais1, 200);" onmouseout = "clearInterval(myVar);"/>
      </td>
    </tr>
    <tr>
      <td colspan="3">
     
    <h3>Temps de démarrage:</h3>
      </td>
    </tr>
    <tr>
      <td>
     
    <input type="button" value="-" id="d4" onclick="decaleramp(a=-1)" onmouseover = "myVar=setInterval(delais4, 300);" onmouseout = "clearInterval(myVar);"/>
      </td>
      <td id="cadre">
     
    <p class="inforp" id="ramp">0</p>
      </td>
      <td>
     
    <input type="button" value="+" id="d3" onclick="decaleramp(a=1)" onmouseover = "myVar=setInterval(delais3, 300);" onmouseout = "clearInterval(myVar);"/>
      </td>
    </tr>  </table>  <div class="divbtn"><input type="submit" class="btn" value="Valider"/></div>  <input type="hidden" value="0" name="frequence"/>  <input type="hidden" value="0.00" name="rampe"/>
    </form>
    <script>                
    var y1;         
    var y2;         
    var elmtfreq;           
    var elmtramp;           
    var x = 0;              
    var r = 0;              
    var myVar;              
    function initVar() {
            y = parseInt(window.innerWidth,10)*0.8;
            y1 = (y/75);
            y2 = Math.round(y/6);
            elmtfreq = document.getElementById('freq');
            elmtramp = document.getElementById('ramp');
            a = document.getElementsByName('frequence')[0].value;
            decalefreq(a=10);
            a = document.getElementsByName('rampe')[0].value;
            decaleramp(a=2);}
            
    function decalefreq() {
            x += (y1*a);
            if(x > -1 & x < (y1*61)){elmtfreq.style.left = Math.round(x) + 'px';}
            x = parseInt(elmtfreq.style.left);
            document.getElementById('freq').textContent = Math.round(x/y1);
            document.getElementsByName('frequence')[0].value = Math.round(x/y1);}
            
    function decaleramp() {
            r += (y2*a);
            if(r > -1 & r < (y2*6)){elmtramp.style.left = r + 'px';}
            r = parseInt(elmtramp.style.left);
            document.getElementById('ramp').textContent = r/y2;
            document.getElementsByName('rampe')[0].value = r/y2;}
            
    function delais1(){decalefreq(a=1);}            
    function delais2(){decalefreq(a=-1);}
    function delais3(){decaleramp(a=1);}            
    function delais4(){decaleramp(a=-1);}           
     
    window.addEventListener('load', function(){             
    var d1 = document.getElementById('d1');         
    var d2 = document.getElementById('d2');         
    var d3 = document.getElementById('d3');         
    var d4 = document.getElementById('d4');         
    var a;          
    d1.addEventListener('touchstart', function(e){a=setInterval(delais1, 200);e.preventDefault()},false);
    d1.addEventListener('touchend', function(e){clearInterval(a);e.preventDefault()}, false);
    d2.addEventListener('touchstart', function(e){a=setInterval(delais2, 200);e.preventDefault()},false);
    d2.addEventListener('touchend', function(e){clearInterval(a);e.preventDefault()}, false);
    d3.addEventListener('touchstart', function(e){a=setInterval(delais3, 300);e.preventDefault()},false);
    d3.addEventListener('touchend', function(e){clearInterval(a);e.preventDefault()}, false);
    d4.addEventListener('touchstart', function(e){a=setInterval(delais4, 300);e.preventDefault()},false);
    d4.addEventListener('touchend', function(e){clearInterval(a);e.preventDefault()}, false)}
    ,false)
            </script>
    	</body>
    	</html>

    merci de votre aide

  6. #6
    Futur Membre du Club
    Donc après un bon moment de galère ce pb est lié à la ponctuation de javascript où il faut systématiquement ajouter le ";" à la fin de chaque instruction car lors de la compilation et téléversement sur l'ESP tous les retours à la ligne sautent et donc le code n'est pas interprété.

  7. #7
    Modérateur

    Bonjour,
    ce pb est lié à la ponctuation de javascript où il faut systématiquement ajouter le ";" à la fin de chaque instruction
    le ; en fin d'instruction est effectivement facultatif mais fortement conseillé, à preuve ta mésaventure lors de la minification, même si certains en raison d'un gain d'un octet s'en épargne la frappe.

    Il existe bien d'autres cas qui, sans minification, plantent, un classique
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    const elements = document.querySelectorAll("p")
    console.log("result :", elements)
    [].forEach.call(elements, function (el) {
      console.log(el)
      // fait quelque chose
    })