setTimeout延遲不起作用

我試圖圍繞我的頭setTimeout，但我無法讓它正常工作。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(); 
}); 

});

上的任何暗示什麼，我可能是做錯了高度讚賞:)

來源

2011-11-19 timkl

setTimeout將函數作爲參數。您正在執行該功能並將結果傳遞到setTimeout（因此該功能會立即執行）。您可以使用匿名函數，例如：

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

注意，同樣是setInterval如此。

來源

2011-11-19 18:29:20

THX幫了我！ :) 我更新了我的jsfiddle：http://jsfiddle.net/timkl/cRDQh/ 我仍然得到相同的結果，setTimeouts同時觸發。 – timkl

沒問題:)如果你不想讓它們在同一時間觸發，改變超時長度。例如，第一次超時爲1000毫秒，第二次爲2000毫秒，依此類推。 –

不僅對'setTimeout'和'setInterval'同樣如此，而且對於每種情況，您都應該將回調作爲參數之一傳遞。 – Tadeck

您需要使用函數參考稍後在定時器到期時被調用。將每個語句包裝在匿名函數中，以便它不會立即執行，而是在計時器到期時執行。

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

另外，您希望爲每個延遲值使用不同的延遲值，以便計時器不會同時過期。請參閱http://jsfiddle.net/RqCqM/的更新小提琴

來源

2011-11-19 18:29:16 tvanfosson

只需使用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(); 
});

來源

2011-11-19 18:33:25 Purag

你需要用你的陳述中匿名函數，也錯開您的時間 -

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

如果同時設置一切1000的步驟將相當多的運行爲setTimeout函數將在上次調用setTimeout函數完成後的1秒內調用該函數後1秒運行任務。

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

來源

2011-11-19 18:33:57 ipr101

+1好點 - 你不僅指出了回調的通過方式，還指出了執行回調的方式。 – Tadeck

您需要TOT使用功能，超時被通過後，被稱爲;你也可以使用匿名函數，那麼你的函數foo將如下所示：

function foo(){ 

writeNumber = $("#target"); 

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

};

來源

2011-11-19 18:42:34

我登陸了這個問題。它已被充分回答，我認爲使用setInterval作爲@Purag建議可能是獲得所需功能行爲的最佳方法。然而，最初的代碼示例沒有考慮到JavaScript的異步行爲。這是一個經常發生的錯誤，我已經使自己超越了場合:)。

因此，作爲一個方面說明我想給這個模仿的初步嘗試另一個可能的解決方案，但這個時候會考慮JavaScript的Asynchronousity：

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

現在ofcourse這顯然是可怕的代碼！

我在my own SO question中給出了一個可用的JSFiddle。此代碼舉例說明所謂的末日金字塔。這可以通過使用JavaScript承諾來緩解，如我的問題的答案所示。這需要一些工作，寫一個版本的WriteNumber()使用的承諾，但隨後的代碼可以改寫爲服用點，如：

來源

2014-12-04 20:24:54 Bart

有一項條款參數傳遞給函數。你的情況，你可以通過

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

第三個參數setTimeout函數做到這一點會被傳遞給writeNumber.html功能

來源

2016-11-04 15:01:12

setTimeout延遲不起作用

回答

相關問題