Question

我试图绕过setTimeout，但我无法让它正常工作。

我在这里设置了一个示例：http://jsfiddle.net/timkl/Fca2n/

我希望在单击一个锚点后对文本进行倒计时 - 但我的setTimeout似乎同时触发，即使我已将延迟设置为1秒。

这是我的HTML：

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

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

这是我的JS：

$(document).ready(function() {


function foo(){

    writeNumber = $("#target");

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

$('a').click(function() {
 foo();
});

});

对我可能做错的任何暗示都非常感激：）

Answer 1

setTimeout将函数作为参数。您正在执行该函数并将结果传递给setTimeout（因此该函数会立即执行）。您可以使用匿名函数，例如：

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

请注意setInterval也是如此。

Answer 2

你需要将你的陈述包装在匿名函数中，并且还要错开你的时间 -

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

如果你将所有内容都设置为1000，那么步骤几乎会同时运行，因为setTimeout函数将在上一次调用{{{1}后调用该函数后不到1秒运行任务1秒1}}功能完成。

演示 - http://jsfiddle.net/JSe3H/1/

Answer 3

您需要使用函数 reference 以便在计时器到期时调用。将每个语句包装在一个匿名函数中，以便它不会立即执行，而是在计时器到期时执行。

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

此外，您希望为每个延迟值使用不同的延迟值，以便计时器不会同时到期。请在http://jsfiddle.net/RqCqM/

查看更新的小提琴

Answer 4

有一个规则可以将参数传递给函数。在您的情况下，您可以通过

来完成

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

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

Answer 5

只需使用setInterval()即可。 Here是我想出来的。这是你的新javascript：

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

Answer 6

你需要使用在超时传递后调用的函数;你也可以使用匿名函数，那么你的函数foo将如下所示：

function foo(){

writeNumber = $("#target");

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

};

Answer 7

我登陆了这个问题。它得到了充分的回答，我认为使用setInterval作为@Purag建议可能是获得所需功能行为的最佳方法。但是，最初的代码示例并没有考虑JavaScript的异步行为。这是一个经常发生的错误，我已经不止于此了。）。

所以作为旁注，我想给出另一个可能的解决方案，模仿最初的尝试，但这一次考虑Javascript的异步性：

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

现在，这显然是可怕的代码！

我在my own SO question给出了一个有效的JSFiddle。此代码举例说明了所谓的厄运金字塔。这可以通过使用JavaScript承诺来缓解，如我的问题的答案所示。编写使用Promises的WriteNumber()版本需要一些工作，但是代码可以重写为类似于：

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

setTimeout延迟不起作用

7 个答案: