Comment puis-je utiliser la synchronisation javascript pour contrôler les événements d'arrêt de la souris et de déplacement de la souris

Question

J'ai donc un contrôle (une carte) sur une page aspx. Je veux écrire un peu de javascript pour onload configuration les éléments suivants:

1. lorsque la souris arrête sur le contrôle = un code

2. lorsque la souris se déplace = un code (mais seulement si le mouvement est plus de 250 mil sec)

Cela fonctionne pour déclencher le code à l'arrêt puis sur le mouvement ...

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); 
    }; 
    })(); 
}; 

Mais je ne peux pas comprendre comment introduire un retard dans le code en mouvement. Je pensais que je l'avais avec cela ...

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); 
    }; 
    })(); 
}; 

Mais il ne se comporte pas comme je le pensais. Le mouvement "thread2" n'est jamais effacé par l'arrêt. Qu'est-ce que je rate?

Answer 1

C'est une question délicate. Un peu de rafistolage a donné lieu à ceci:

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 raison pour laquelle votre code ne fonctionne pas est que les feux mousemove à plusieurs reprises alors que la souris se déplace et vous commencent de nouveaux délais d'attente à chaque fois.