JS clearTimeout не работает, даже если переменная установлена ​​вне функции

Question

Я пытаюсь отобразить предварительный просмотр при наведении курсора, но если я уберу мышь, я хочу, чтобы предварительный просмотр не отображался.В настоящее время, если я быстро наведу указатель мыши на элемент «.searchRecord», он все равно будет отображаться через 300 мс и застрянет, поскольку функция отключения мыши была вызвана до завершения функции setTimeout.если я оставлю курсор на элементе до тех пор, пока предварительный просмотр не покажет, что все работает нормально.

Я устанавливаю переменную вне функции, как я читал в другом месте, однако она не сбрасывается.Я немного в замешательстве.

var timer;
$('.searchRecord').hover(function() {
    $(this).children('.previewLoad').show();
    var current = '#'+$(this).children('div').attr('id');

    //slight delay before hover so they can select what they want
    var timer = window.setTimeout(function(){
        $(current).fadeIn('fast');
        $(current).siblings('.previewLoad').hide();
    }, 300);
}, function() {
    window.clearTimeout(timer);
    var current = '#'+$(this).children('div').attr('id');
    previewTimeouter(current);
});

Answer 1

у вас есть дублированное объявление таймера. удалите var in var timer в обратном вызове при наведении курсора.

var timer;
$('.searchRecord').hover(function() {
    $(this).children('.previewLoad').show();
    var current = '#'+$(this).children('div').attr('id');

    //slight delay before hover so they can select what they want
    timer = window.setTimeout(function(){
        $(current).fadeIn('fast');
        $(current).siblings('.previewLoad').hide();
    }, 300);
}, function() {
    window.clearTimeout(timer);
    var current = '#'+$(this).children('div').attr('id');
    previewTimeouter(current);
});

Answer 2

Вы снова используете var timer внутри функции обратного вызова hover, которая связывает ее с этой функцией и скрывает родительскую переменную timer.

Удалите это внутреннее var и все будет хорошо.