2010-09-12 199 views
-2

我嘗試創建效果。問題是效果的持續時間。對於我的效果,我想傳遞一個參數持續時間。這將設置效果運行的時間間隔。 jquery如何在它們的效果上做到這一點?我嘗試了setTimeout,但這很複雜。setTimeout問題

感謝您的任何幫助。

+4

*「......這真的很糟糕......」*不是一個有用的陳述。你有什麼關於'setTimeout'的問題? – 2010-09-12 12:38:10

+0

@ T.J .:我不應該給你的評論+1或標記它。 – 2010-09-12 13:00:00

+0

@ Rakesh:標記它爲什麼?或者是一個笑話... – 2010-09-12 13:11:29

回答

2

的兩種基本方法做UI循環中的JavaScript在瀏覽器上是setTimeoutsetInterval

setTimeout會以毫秒爲單位指定時間間隔後調用一個函數。時間不一定準確,你通常不能在瀏覽器上安排10ms內的內容。它會通過clearTimeout返回一個句柄,您可以使用該句柄取消回調(如果在發生之前就已經達到該回調)。要做一個循環,當你完成前一個循環時,你設置一個新的超時。

setInterval將在給定的間隔調用一個函數反覆(也以毫秒爲單位,也與一個典型的10ms的最小值)。它會返回一個句柄,您可以使用該句柄通過clearInterval停止重複。你不必每次都開始一個新的,解釋者爲你做循環。

你選擇哪一個取決於你想要做什麼和個人喜好。請注意,setInterval中的時間間隔從回調爲時調用開始計算,而如果您在回調處理結束時計劃新的setTimeout,則顯然會從該時間點開始計劃。如果您的處理需要花費大量時間,則差異可能很重要(但是,您想要的完全取決於您正在解決的問題)。

我認爲「持續時間」作爲一個整個需要運行多長時間,這將在這些之外 - 這將是您的效果代碼的函數。我所看到的大多數效果都是按步驟運行的(不知道你會怎麼做),並根據你給他們的持續時間以及作者認爲需要的最大粒度來確定需要採取多少步驟。例如,如果你想要從白色到黑色漸變,可能需要255步,但這可能太慢了(我們將放棄討論「寬鬆」,根據人眼和大腦如何感知它們來調整步驟)。如果你被告知總共需要半秒鐘,你可能會以10步完成,每50毫秒執行一步,但如果你有足夠的時間完成,你可以在20步中以相同的時間間隔完成。等

+0

感謝您的答覆。 你能舉個簡單的例子。我想要做的就是像輸入一個文本一樣的效果。逐個字母。它看起來像是有人在打字。我想要做的是設置輸入一個字母之間的時間間隔。例如間隔是1000ms。那麼屏幕上會顯示每秒多一個字母。 – katamshut 2010-09-12 12:42:33

+0

@katamshut:您可以使用'setTimeout'或'setInterval'來做到這一點。我正在更新我的答案,澄清一點,因爲你發佈你的評論。 HTH。 – 2010-09-12 12:52:01

+0

再次感謝。這非常有幫助。 – katamshut 2010-09-12 22:58:15

1

的基本規則position = Initial_value + (change_in_time * start_time)/duration

function animate(duration){ 
    var startTime = new Date().getTime(); 
    var tmr = setInterval(function() { 
     var elapsedTime = new Date().getTime() - startTime; 
     if (elapsedTime < duration) { 
     var f = elapsedTime/duration; 
     // Here " f " is in an important parameter in our animation 
     }else { 
     clearInterval(tmr); 
     } 
    }, 1); 
} 

嘗試演示http://jsbin.com/eruko4

注意:在我的例子( 演示)我正在考慮Inital value as '0';