Queue, delay, stop queue

I'm currently working on a two-levels menu animation with tabs: main menu tab items open tabbed sub-menus.

At load, a default submenu is opened, according to the current page location. The user may choose to open other subemenus to browse through navigation. But, when the user does not care any more of the menu, the default submenu should reappear after a while to match the current 开发者_JS百科location. This code works correctly for this use:

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

Here is the problem. If the user comes back on the menu after the Timeout was launched (in the 2 seconds delay), the default submenu appears anyway, which may disturb the user experience. It would be great to stop the timeout when the user comes back to the menu.

I think it would be better to use Queue, Delay... but I don't know how to do it since most of the documentation refers to animation queuing...

Thanks for your help...

You can stop started timeout with clearTimeout, like so:

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

You don't really need to use queues to cancel the timer when the mouse enters the menu. You can call clearTimeout() to do that, and store the timeout identifier using jQuery's data() facility:

$("#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");
    }
});