¿Cómo puedo usar la sincronización de JavaScript para controlar los eventos de detención del mouse y del mouse?

Question

Así que tengo un control (un mapa) en una página aspx. Quiero escribir algo de JavaScript a onLoad configuración siguiente:

1. cuando el ratón se detiene en el control = algo de código

2. cuando se mueve = algo de código (pero sólo si el movimiento es más largo de 250 milésimas seg)

Esto funciona para activar el código de parada y luego en movimiento ...

function setupmousemovement() { 
var map1 = document.getElementById('Map_Panel'); 
var map = document.getElementById('Map1'); 
map1.onmousemove = (function() { 
    var onmousestop = function() { 
      //code to do on stop 
    }, thread; 

    return function() { 
     //code to do on mouse move 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 25); 
    }; 
    })(); 
}; 

Pero no puedo encontrar la forma de introducir un retraso en el código de movimiento. Pensé que lo tenía con esto ...

function setupmousemovement() { 
var map1 = document.getElementById('Map_Panel'); 
var map = document.getElementById('Map1'); 
map1.onmousemove = (function() { 
    var onmousestop = function() { 
      //code to do on stop 
      clearTimeout(thread2); 
    }, thread; 

    return function() { 
     thread2 = setTimeout("code to do on mouse move", 250); 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 25); 
    }; 
    })(); 
}; 

Pero no se comporta como pensé. El movimiento "thread2" nunca se borra al detenerse. ¿Qué me estoy perdiendo?

Answer 1

Eso es complicado. Un poco de retoques dio lugar a esto:

function setupmousemovement() { 

    var map1 = document.getElementById('Map_Panel'); 
    map1.onmousemove = (function() { 
    var timer, 
     timer250, 
     onmousestop = function() { 

      // code to do on stop 

      clearTimeout(timer250); // I'm assuming we don't want this to happen if mouse stopped 
      timer = null; // this needs to be falsy next mousemove start 
     }; 
    return function() { 
     if (!timer) { 

     // code to do on start 

     timer250 = setTimeout(function() { // you can replace this with whatever 

      // code to do when 250 millis have passed 

     }, 250); 
     } 
     // we are still moving, or this is our first time here... 
     clearTimeout(timer); // remove active end timer 
     timer = setTimeout(onmousestop, 25); // delay the stopping action another 25 millis 
    }; 

    })(); 

}; 

La razón por la que su código no funciona es que los incendios mousemove repetidamente mientras el ratón se está moviendo y que están comenzando nuevos tiempos de espera cada vez.