setTimeout延迟不起作用

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

我在这里建立了一个例子： http ： //jsfiddle.net/timkl/Fca2n/

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

这是我的HTML：

 Click me!  

这是我的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函数将在上一次调用setTimeout函数完成后调用函数1秒后运行任务。

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

Answer 3

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

 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() 。 这就是我想出来的。 这是你的新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建议可能是获得所需function行为的最佳方法。 但是，最初的代码示例并没有考虑JavaScript的异步行为。 这是一个经常发生的错误，我已经不止于此了:)。

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

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

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

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

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