如何在悬停功能执行前添加一个等待时间

Question

我正在嵌套菜单上工作，当鼠标移过一个选项时，会出现一个子列表。 这里是我的悬停功能：

$(".sublist").parent().hover(function() { 
    $(this).toggleClass("li_hover",300); //use to change the background color 
    $(this).find(".sublist").toggle("slide", {}, 500); //sub list show/hide 
}); 

现在，我想添加一个短周期前的子列表显示出来，以防止疯狂老鼠从用户移动。有人对此有很好的建议吗？

---

更新：

感谢你们，我做了我的程序一点点的变化，最近，它看起来是这样的：

function doSomething_hover (ele) { 
    ele.toggleClass("li_hover",300); 
    ele.find(".sublist").toggle("slide", {}, 500); 
} 

$(function() { 
    $(".sublist").parent().hover(function() { 
     setTimeout(doSomething_hover($(this)), 3000); 
    }); 
}): 

这是奇怪的是setTimeout的不会耽误什么。但如果我将函数调用更改为doSomething_hover（不带“（）”），该函数将延迟良好。但我不能通过任何jQuery元素的功能，所以它仍然不起作用，有人可以告诉我，如何使doSomething_hover($(this))工作在setTimeout？

---

更新2： 得到了setTimeout的工作，但似乎不是我想要的： 我到底要什么会发生，如果小于0.5秒一个选项鼠标悬停。

总之，这里是我的代码做的setTimeout工作：

function doSomething_hover (ele) { 
    ele.toggleClass("li_hover",300); 
    ele.find(".sublist").toggle("slide", {}, 500); 
} 

$(function() { 
    $(".sublist").parent().hover(function() { 
     var e = $(this); 
     setTimeout(function() { doSomething_hover(e); }, 1000); 
    }); 
}): 

---

最后更新： 我用clearTimeout当我出去移动鼠标得到了这个工作。 所以代码应该是：

$(".sublist").parent().mouseover(function() { 
     var e = $(this); 
     this.timer = setTimeout(function() { doSomething_hover(e); }, 500); 
    }); 

    $(".sublist").parent().mouseout (function() { 
     if(this.timer){ 
      clearTimeout(this.timer); 
     } 
     if($(this).hasClass("li_hover")){ 
      $(this).toggleClass("li_hover"); 
     } 
     $(this).find(".sublist").hide("slide", {}, 500); 

    }); 

这是$(document).ready()的部分。其他代码将与上面相同。

---

真。最终更新： 因此，mouseover和mouseout有时会导致错误，因为当我将鼠标移动到子列表时，父母的mouseover事件将触发，并隐藏子列表。 问题可以通过使用hover功能来解决：

$(".sublist").parent().hover( 
     function() { 
      var e = $(this); 
      this.timer = setTimeout(function() { doSomething_hover(e); }, 500); 
     }, 
     function() { 
      if(this.timer){ 
       clearTimeout(this.timer); 
      } 
      $(this).find(".sublist").hide("slide", {}, 500); 
      if($(this).hasClass("li_hover")){ 
       $(this).toggleClass("li_hover",300); 
      } 
     } 
    ); 

感谢所有

Answer 1

试试这个请：

代码

setInterval(doSomthing_hover, 1000); 


function doSomthing_hover() { 
    $(".sublist").parent().hover(function() { 

     $(this).toggleClass("li_hover", 300); //use to change the background color 
     $(this).find(".sublist").toggle("slide", {}, 500); //sub list show/hide 
    }); 

}​ 

SETTIME VS的setInterval

从根本上说，了解如何定时器的JavaScript工作是很重要的。很多时候，他们的行为unintuitively因为单个线程，他们都在的。让我们通过检查，我们有一个可以构建和操作计时器访问的三种功能启动。

var id = setTimeout(fn, delay); - 启动一个定时器，在延迟后调用指定的函数。该函数返回一个唯一的ID，用它可以在稍后取消定时器。

var id = setInterval(fn, delay); - 与setTimeout类似，但不断调用该函数（每次都会延迟）直到它被取消。

clearInterval(id);，clearTimeout(id); - 接受一个计时器ID（通过上述功能返回）并从产生的停止计时器回调。

为了理解定时器如何在内部工作，有一个重要的概念需要探索：定时器延迟不能保证。由于所有的JavaScript在浏览器上执行一个线程异步事件（如鼠标点击和计时器）时，有已经在执行的开口只运行。

进一步阅读：http://ejohn.org/blog/how-javascript-timers-work/

Answer 2

你可以使用.setTimeout

$(".sublist").parent().hover(function() { 
    setTimeout(function() { 
     $(this).toggleClass("li_hover", 300); //use to change the background color 
     $(this).find(".sublist").toggle("slide", {}, 500); //sub list show/hide 
    }, 1000); 
});​ 

Answer 3

timeout = setTimeout('timeout_trigger()', 3000); 
clearTimeout(timeout); 

jQuery(document).ready(function() { 
//hide a div after 3 seconds 
setTimeout("jQuery('#div').hide();",3000); 
}); 

参考link

function hover() { 
$(".sublist").parent().hover(function() { 
$(this).toggleClass("li_hover",300); //use to change the background color 
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show/hide 
}); 
} 
setTimeout(hover,3000); 

....