jQuery hover disparando várias vezes, mesmo para elementos TD onde o mouse não pairou durante a duração necessária - jquery, jquery-hover

Eu tenho o tempo limite definido bastante longo, 888ms.E estou tomando cuidado para não deixar o ponteiro do mouse permanecer em mais de uma célula. O mouse toca algumas outras células muito brevemente depois que eu passei o mouse sobre uma célula no meio da mesa e movo rapidamente o mouse sobre a célula adjacente células para sair dos limites da tabela. Mas o mouse está nas células adjacentes por apenas um instante.

Ainda estou recebendo um alerta para cada célula do mousetoca em seu caminho para fora da mesa. É como se, uma vez que o tempo limite fosse disparado, qualquer célula cujo evento mouseover estivesse sendo disparado estivesse sendo tratada como se tivesse pairado sobre todos os 888ms.

O código a seguir está dentro de um loop each (), que visita cada uma das células na tabela:

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

Respostas:

Isso é porque as linhas var el = $(this); estão retornando novos objetos jQuery cada vez que são chamados, então você está armazenando delayedFunction para um objeto jQuery que não é o mesmo em ambas as funções (eles serão diferentes cada vez que uma das funções for chamada, embora estejam mantendo o mesmo objeto DOM), então você está sempre obtendo undefined na segunda função.

Você pode anular isso, estabelecendo o id de tempo limite para o objeto DOM real para que os dados sejam preservados, assim:

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

E

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