队列、延迟、停止队列

Question

我目前正在制作一个带有选项卡的两级菜单动画:主菜单项、选项卡项、打开选项卡子菜单。

加载时，将根据当前页面位置打开默认子菜单。用户可以选择打开其它子菜单以浏览导航。但是，当用户不再关心菜单时，默认子菜单应该在一段时间后重新出现，以匹配当前位置。此代码可正确用于此用途：

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

这是问题所在。如果用户在启动超时后返回菜单(在2秒的延迟内)，则仍然会出现默认子菜单，这可能会干扰用户体验。当用户返回到菜单时停止超时将是非常好的。

我认为最好使用队列，延迟...但我不知道该怎么做，因为大多数文档都提到了动画队列……

谢谢你的帮助。

Answer 1

您可以使用clearTimeout停止启动超时，如下所示：

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

Answer 2

当鼠标进入菜单时，您实际上不需要使用队列来取消计时器。您可以调用clearTimeout()来完成此操作，并使用jQuery的data()工具存储超时标识符：

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