如何添加延迟计时器？

Question

我有这段代码可使菜单项上下滑动。 我想添加一个计时器，以便在向下滑动然后向上滑动时有延迟。

$(function () {
    $("#menu").find("li").each(function () {
        if ($(this).find("ul").length > 0) {
            $(this).mouseenter(function () {
                $(this).find("ul").stop(true, true).slideDown();
            });
            $(this).mouseleave(function () {
                $(this).find("ul").stop(true, true).slideUp();
            });
        }
    });
});

Answer 1

看来您正在用jQuery编写javascript

jQuery具有用于动画队列的内置.delay函数。

在您的示例中，将下滑动画延迟300毫秒，看起来像

$(this).find("ul").stop(true, true).delay(300).slideDown();

查看jQuery的延迟

Answer 2

一个聪明的方法是在触发mouseleave之前添加一个悬停意图以等待 ：

jsBin演示

$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
     var $UL = $(this).find('ul');
     if(e.type==='mouseenter'){
          clearTimeout( $(this).data('wait') );
          $UL.stop(1,1).slideDown();
     }else{            
          $(this).data('wait', setTimeout(function(){
              $UL.stop().slideUp();
          },180) );     
     } 
});

• 而不是使用if ($(this).find("ul").length > 0) {只需使用：（ ("li:has(ul)")
  仅在具有 ul li元素上触发您的事件。
• 为mouseenter mouseleave添加一个事件回调e 。
• 如果e事件== mouseenter ..... else为mouseleave 。
• 比清除名为“ wait”的data属性，并将子元素ul向下滑动
• 现在， 离开原始li元素到达“遥远” ul我们必须越过通常会立即触发“ slideUp（）”的空白（演示），但是我们在li的data属性内设置了一个超时计数器在运行前将等待〜180ms。
• 到达“遥远”的ul元素-成为超时的“ li”的子代，我们清除超时（步骤1），“保留” mouseenter状态。

使用〜180ms或用鼠标达到“远距离” UL元素所需的时间