Javascript 设置超时延迟不工作

我试图绞尽脑汁设置超时，但无法让它正常工作

我在这里举了一个例子：

我想要一个文本在点击锚后倒计时-但是我的

setTimeout

似乎在同一时间触发，即使我已经将延迟设置为1秒

这是我的HTML：

<a href="#">Click me!</a>

<span id="target"></span>

---

任何关于我可能做错了什么的提示都非常感谢：）

您需要使用函数引用，以便在计时器过期后调用。将每条语句包装在匿名函数中，这样它就不会立即执行，而是在计时器过期时执行

setTimeout(function() { writeNumber.html("1"); },1000);

此外，您希望为每个计时器使用不同的延迟值，以便计时器不会同时过期。查看更新的fiddle（位于以函数作为参数）。您正在执行该函数，并将结果传递到

setTimeout

（因此该函数会立即执行）。您可以使用匿名函数，例如：

setTimeout(function() {
    writeNumber.html("1");
}, 1000);

请注意，

setInterval

也一样，只需使用

setInterval（）

这就是我想到的。以下是您的新javascript：

function foo(){
    writeNumber = $("#target");
    number      = 0;
    writeNumber.html(number);
    setInterval(function(){
        number = number+1;
        writeNumber.html(number);
    },1000);
    };
$('a').click(function() {
 foo();
});

---

您需要将语句包装在匿名函数中，并错开计时-

setTimeout(function(){writeNumber.html("1")},1000);
setTimeout(function(){writeNumber.html("2")},2000);
setTimeout(function(){writeNumber.html("3")},3000);

如果将所有设置为

1000

，步骤将几乎同时运行，因为

setTimeout

函数将在调用该函数后1秒而不是上次调用

setTimeout

函数完成后1秒运行任务

---

演示-

您需要在超时时间过后使用要调用的函数；您也可以使用匿名函数，那么您的函数foo将如下所示：

function foo(){

writeNumber = $("#target");

setTimeout(function() { writeNumber.html("1"); },1000);
setTimeout(function() { writeNumber.html("2"); },1000);
setTimeout(function() { writeNumber.html("3"); },1000);

};

---

我突然想到了这个问题。这已经得到了充分的回答，我认为使用@Purag建议的

setInterval

可能是获得所需功能行为的最佳方法。然而，最初的代码示例没有考虑JavaScript的异步行为。这是一个经常发生的错误，我不止一次犯过：）

作为一个旁注，我想给出另一个可能的解决方案来模仿初始的尝试，但是这次确实考虑了JavaScript的异步性：

setTimeout(function() {
    writeNumber.html("1");
    setTimeout(function() {
        writeNumber.html("1");
        setTimeout(function() {
            writeNumber.html("1");
        }, 1000);
    }, 1000);
}, 1000);

当然，这显然是一个糟糕的代码

我在这方面做了一点工作。这段代码举例说明了所谓的末日金字塔。这可以通过使用JavaScript承诺来缓解，如我问题的答案所示。编写一个使用承诺的

WriteNumber（）

版本需要一些工作，但随后可以将代码重写为如下内容：

writeNumAsync(0)
    .then(writeNumAsync)
    .then(writeNumAsync)
    .then(writeNumAsync);

---

有一个向函数传递参数的规定。在你的情况下，你可以通过

setTimeout(writeNumber.html,1000,1);
setTimeout(writeNumber.html,1000,2);
setTimeout(writeNumber.html,1000,3);

---

setTimeout函数的第三个参数将传递给writeNumber.html函数

Thx以帮助我解决问题！：）我已经更新了我的JSFIDLE：我仍然得到相同的结果，设置超时同时触发。没问题：）如果不希望它们同时触发，请更改超时长度。例如，第一次超时为1000ms，第二次超时为2000ms，依此类推。这不仅适用于

setTimeout

和

setInterval

，而且适用于每种情况，您应该将回调作为参数之一传递。@Tadeck-是的，很好。除了在执行函数时返回一个函数：）@jamesalardice:Agreed，但在这种情况下，您仍在传递回调（即使它是执行另一个函数的结果）。它变得更加复杂，但线索是传递我们希望在指定时间段（或给定时间间隔）后执行的函数，而不是在传递时执行它。+1好的一点-您不仅指出了回调的传递方式，而且还指出了回调的执行时间。

setTimeout(writeNumber.html,1000,1);
setTimeout(writeNumber.html,1000,2);
setTimeout(writeNumber.html,1000,3);