Gestione degli eventi - while(mousedown)

**szz** · 25-11-2014, 18:59

Ciao a tutti,

Anticipo che non sono un utente esperto in JavaScript

, però mi trovo a dover risolvere un problema che non riesco a risolvere e spero mi possiate aiutare.

Ho una immagine dichiarata cosi:

codice HTML:

<img id="protoImage" src="/path/to/img.png" onmousedown="tsMouseDown()" onmouseup="tsMouseUp()" onmouseout="tsMouseOut()" ondragstart='return false;'/>

E finché il tasto del mouse è premuto, dovrei eseguire un timer e svolgere delle determinate funzioni una volta passati alcuni ms, per esempio mezzo secondo.

Finora sono riuscito a scrivere questo codice:

codice:

var lastTime = 0;
var now = 0;
var tmptimer = 0;
var loopFlag = false;
var timeFlag = false;

function tsMouseDown()
{
  loopFlag = true;
  timeFlag = false;

  var div = document.getElementById("debugDiv");
  div.textContent = "tsMouseDown...";

  lastTime = new Date().getTime();
  var tmptimer = lastTime;

  while((loopFlag == true) && ((tmptimer - lastTime) <= 500))
  {
    tmptimer = new Date().getTime();
  }

  if((tmptimer - lastTime) >= 500)
  {
    timeFlag = true;
    div.textContent = "tsMouseDown ... 500 ms passed";
  }
}

function tsMouseUp()
{
  loopFlag = false;
  var div = document.getElementById("debugDiv");

  now = new Date().getTime();

  if(timeFlag == false)
    div.textContent = "tsMouseUp: " + (now - lastTime) + "< 500 ms...";  
  else
    div.textContent = "tsMouseUp: " + (now - lastTime) + "> 500 ms...";
}

function tsMouseOut()
{
  var div = document.getElementById("debugDiv");
  div.textContent = "tsMouseOut: 0";
}

Il problema sembra essere il ciclo while nella funzione tsMouseDown(), perché anche se il tasto del mouse viene rilasciato, il timer sempre sorpassa i 500 ms, come se il flag loopFlag non fosse settato a false...

Purtroppo, date le mie scarse conoscenze in Javascript e Ajax, non sò come risolvere il problema..

Ringrazio in anticipo.

**KillerWorm** · 25-11-2014, 19:33

Ciao e benvenuto.
A differenza di altri linguaggi, in javascript è sempre una pessima idea usare un ciclo while come timer.
Se ti serve impostare un semplice timer, puoi utilizzare le apposite funzioni setTimeout e setInterval.

**szz** · 25-11-2014, 20:56

Grazie 1000 KillerWorm, infattiho risolto come hai indicato, con setTimeout e clearTimout.

**KillerWorm** · 25-11-2014, 22:48

Bene.
In aggiunta, posto un esempio in base al tuo codice che ho rielaborato. Potrebbe darti qualche altro spunto.

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }
      #debug{
        z-index:100;
        position:fixed;
        bottom:0;
        left:5%;
        right:5%;
        box-sizing: border-box;
        width:90%;
        height:80px;
        border:2px solid Blue;
        font:9pt monospace;
        background:WhiteSmoke;
        outline:0;
        resize:vertical;
        overflow-y:scroll;
      }
    </style>
    <script type="text/javascript">
    
      var milliseconds = 500;
      var timeMouseDown;
      var timeout;
      
      function tsMouseDown(){
          debug("tsMouseDown...");
          timeMouseDown = new Date().getTime();
          timeout = setTimeout("debug('tsMouseDown ... 500 ms passed')",milliseconds);
      }
      function tsMouseUp(){
        clearTimeout(timeout)
        var now = new Date().getTime();
        var interval = now - timeMouseDown;
        debug("tsMouseUp: "+interval+(interval>milliseconds?" > ":" <= ")+milliseconds+" ms...");
      }
      function tsMouseOut(){
        debug("tsMouseOut: 0");
      }
      function debug(msg){
        var e = document.getElementById("debug");
        e.innerHTML += msg+ "<br>";
        e.scrollTop = e.scrollHeight;
      }
    </script>
  </head>
  <body>
    <img id="protoImage" alt="an image" src="image.jpg" onmousedown="tsMouseDown()" onmouseup="tsMouseUp()" onmouseout="tsMouseOut()" ondragstart='return false;'/>
    <div id="debug"></div>
  </body>
</html>

Buon proseguimento

Discussione: Gestione degli eventi - while(mousedown)

Strumenti discussione

Ricerca discussione

Visualizza

Gestione degli eventi - while(mousedown)

Permessi di invio