jQuery passa al passaggio del mouse più volte, anche per gli elementi TD in cui il mouse non si è librato per la durata richiesta - jquery, jquery-hover

Ho il timeout impostato abbastanza lungo, 888ms. E sto attento a non lasciare che il puntatore del mouse indugi su più di una cella. Il mouse tocca alcune altre celle in modo estremamente breve dopo che sono passato sopra una cella al centro del tavolo e quindi sposta rapidamente il mouse sull'adiacente celle per uscire dai limiti della tabella, ma il mouse è su quelle celle adiacenti per un solo istante.

Eppure sto ricevendo un avviso per ogni cella del mousesi avvicina al tavolo. È come se una volta scaduto il timeout, qualsiasi cella il cui evento mouseover è attivo viene trattata come se fosse stata sospesa per 888 ms.

Il seguente codice è all'interno di un ciclo each (), che visita ciascuna delle celle nella tabella:

           cell$.hover(
function () {
var el = $(this);
var delayedFunction = window.setTimeout(function () {
$.data(el, "timerid", null);
alert("hovered" + el.attr("id"));
}, 888);
$.data(el, "timerid", delayedFunction);
},
function () {
var el = $(this);
var delayedFunction = $.data(el, "timerid");
if (delayedFunction != null) {
// Kill previously started timer
window.clearTimeout(delayedFunction);
}
}
);

risposte:

Questo perché le linee var el = $(this); stanno restituendo nuovi oggetti jQuery ogni volta che vengono invocati, quindi stai memorizzando delayedFunction per un oggetto jQuery che non è lo stesso in entrambe le funzioni (saranno diverse ogni volta che viene invocata una delle funzioni, anche se contengono lo stesso oggetto DOM) in modo da ottenere sempre undefined nella seconda funzione.

È possibile annullare ciò stabilendo l'id timeout sull'oggetto DOM effettivo in modo che i dati vengano conservati, in questo modo:

$.data(el[0], "timerid", delayedFunction);//In your first function

E

var delayedFunction = $.data(el[0], "timerid");//In your second function