Проблемы с clearTimeout

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

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

     function hideNav() {
        $('.subnav').hover(function(){
            clearTimeout(t);
        }, function() {
            $(this).hide();
        });
}

$('#nav li').mouseover(function() {
    t = setTimeout(function() { $('.active').hide()}, 4000);
    //var liTarget = $(this).attr('id');
    $('.active').hide();
    $('.subnav', this).show().addClass('active');
    navTimer;
    hideNav();
});

Чего мне не хватает? Я неправильно передаю дескриптор?

1. И в чем именно проблема?

2. может быть, ваша область действия переменной timer неверна? Существует ли он? Попробуйте так: window.timer = setTimeout …. и clearTimeout(window.timer)

3. Что сказал @MichaelKoper — вам нужно явно создать t глобальную переменную. Прямо сейчас он является локальным для вашей анонимной функции наведения курсора мыши.

4. Проблема в том, что он не сбрасывает время ожидания. Я изменил сценарий, чтобы определить t вне функции, но он все еще не работает.

5. @mblase75: исключение var сделает его неявным глобальным.

Ответ №1:

Вы также должны очистить время ожидания при наведении курсора мыши, прежде чем устанавливать новое время ожидания.
В противном случае тайм-аут, запущенный ранее, все еще будет активен, но больше не будет доступен через t-переменную.

Ответ №2:

вы можете сделать переменную таймера глобальной.

 function hideNav() {
  $('.subnav').hover(function(){
    clearTimeout(window.t);
  }
}

$('#nav li').mouseover(function() {
  window.t = setTimeout(function() { $('.active').hide()}, 4000);
});

Ответ №3:

Попробуйте сделать это рекомендуемым способом (оператор JS в виде строки).:

 t = setTimeout("$('.active').hide()", 4000);

1. Это использует eval то, что не одобряется.

2. Это полезно знать. W3C не предоставляет никаких примеров функции (), поэтому я предположил, что это предпочтительный способ. Я полагаю, я возьму ‘downvote’ ради изучения чего-то нового. 😉