Очередь, задержка, остановка очереди

Question

В настоящее время я работаю над двухуровневой анимацией меню с вкладками: элементы вкладок главного меню открывают подменю с вкладками.

При загрузке открывается подменю по умолчанию в соответствии с текущим местоположением страницы.Пользователь может выбрать открытие других подменю для просмотра навигации.Но когда пользователь больше не заботится о меню, через некоторое время должно появиться подменю по умолчанию, соответствующее текущему местоположению.Этот код работает правильно для этого использования:

$("#menu").mouseleave(function(){
    setTimeout(function(){
        $("#menu").tabs( "option", "selected", index );},
        2000);
        });
    });

Вот проблема.Если пользователь возвращается в меню после запуска тайм-аута (с задержкой в ​​2 секунды), в любом случае появляется подменю по умолчанию, которое может нарушить работу пользователя.Было бы здорово остановить таймаут, когда пользователь вернется в меню.

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

Спасибо за помощь ...

Answer 1

Вам не нужно использовать очереди для отмены таймера, когда мышь входит в меню.Для этого вы можете вызвать clearTimeout () и сохранить идентификатор тайм-аута, используя data () jQuery:

$("#menu").mouseleave(function() {
    $(this).data("timeout", window.setTimeout(function() {
        $("#menu").tabs("option", "selected", index);
    }, 2000));
}).mouseenter(function() {
    var timeout = $(this).data("timeout");
    if (timeout) {
        window.clearTimeout(timeout);
        $(this).removeData("timeout");
    }
});

Answer 2

Вы можете остановить таймаут запуска с помощью clearTimeout, например:

var menuTimeOut;
$("#menu").mouseleave(function(){
 menuTimeOut = setTimeout(function(){
    $("#menu").tabs( "option", "selected", index );},
    2000);
    });
});
$("#menu").mouseenter(function(){
  if(menuTimeOut) { 
     clearTimeout(menuTimeOut);
  }
});