JavaScript 问题：setTimeout答案

【问题标题】：JavaScript issue: setTimeoutJavaScript 问题：setTimeout
【发布时间】：2014-07-02 15:22:37
【问题描述】：

我正在尝试使用 JavaScript 和 jQuery 制作一个移动面板。

我做了这个Working Demo，JS部分是这样的：

$("nav.nav").hover(function(){
    $("nav.nav").animate({left:'-5px'},100,"swing");
  },
  function(){
    $("nav.nav").animate({left:'-170px'},100,"swing");
  });

如您所见，它正在工作，但我想在离开面板时添加延迟，因为有时我会错误地离开面板 1 个像素，这很烦人。

我尝试像这样使用setTimeout("javascript function", milliseconds);：

$("nav.nav").hover(function(){
    $("nav.nav").animate({left:'-5px'},100,"swing");
  }, setTimeout(function(){
      $("nav.nav").animate({left:'-170px'},100,"swing");
  },10));

（超时中的回调函数）但它不起作用，我不知道为什么。

【问题讨论】：

标签： javascript jquery jquery-animate settimeout jquery-hover

【解决方案1】：

您需要像这样使用悬停功能中的功能

var tOut = null;
$("nav.nav").hover(function () {
    clearTimeout(tOut); //Clear timout so it doesn't animate back when hovering
    $("nav.nav").animate({
        left: '-5px'
    }, 100, "swing");
},function () {
    tOut = setTimeout(function () {
        $("nav.nav").animate({
            left: '-170px'
        }, 100, "swing");
    }, 1000);
});

DEMO

【讨论】：

谢谢Anton ...所以我不再使用悬停方法的回调函数了吗？那很有意思！编辑：算了，我看错了你的代码
为什么要使用手动 setTimeout() 而不是 .delay() 和 .stop() 内置在 jQuery 中并使用动画？
@jfriend00 嗯，没错，settimeout 是我想到的第一件事

【解决方案2】：

我建议使用 jQuery 的 .delay()（与 .stop(true) 结合使用）自动为您处理计时器：

$("nav.nav").hover(function () {
    $("nav.nav").stop(true).animate({left: '-5px'}, 100, "swing");
},function () {
    $("nav.nav").stop(true).delay(1000).animate({left: '-170px'}, 100, "swing");
});

工作演示：http://jsfiddle.net/jfriend00/LuNHR/

【讨论】：

应该注意这里不会重置延迟。尝试尽可能快地在一行中悬停多次以了解我的意思
来自 jQuery 延迟页面：.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。