setTimeout все еще срабатывает, несмотря на clearTimeout

Question

У меня есть следующая функция. Цель состоит в том, что, когда вы наводите курсор на объект с классом .toolTip, он регистрирует data-tooltip из элемента, который вы навешиваете через 3 секунды. Однако, если ваш курсор покидает элемент, он должен отменить setTimeout и не показывать сообщение.

Сообщения «Тайм-аут» и «Тайм-аут очищены», как и ожидалось, но именованная функция срабатывает в любом случае. Что я делаю не так? не

$(document).on("hover",".toolTip", function() { 
    var toolTip = $(this); 
    var toolTipMessage 
    var hoveringNow = toolTip.attr("data-hovering-now"); 
    if(typeof hoveringNow !== typeof undefined && hoveringNow !== false) { 
     toolTip.removeAttr('data-hovering-now'); 
     clearTimeout(toolTipMessage); 
     console.log('Timeout cleared'); 
    } 
    else { 
     toolTip.attr('data-hovering-now', true); 
     toolTipMessage = setTimeout(showToolTip, 3000, toolTip.attr("data-tooltip")); 
     console.log('Timeout set'); 
    }    
}); 

function showToolTip(message) { 
    console.log(message); 
} 

Answer 1

Ваши переменной toolTipMessage живет только в контексте выполнения функции, которая выполняется при наведении курсора мыши, в следующий раз, когда вы парить этот элемент, переменный больше не существует (или, более точно, у вас есть другого переменная с тем же именем).

Для того чтобы переменная сохранялась между выполнением, вам нужна эта переменная, определенная в охватывающем контексте выполнения - например, вне обработчика hover.

var toolTipMessage = null; 
$(document).on("hover",".toolTip", function() { 
    .... 
});