實現網頁動畫-setTimeout()

setTimeout() 函式經常被用於實現網頁上動畫,例如以下的倒數效果: 

此動畫效果需要以下的程式碼:

var i = 10;
countdown();

function countdown() {
document.getElementById('msg').innerHTML = i;
i--;
if (i < 0) i = 10;
setTimeout(countdown, 1000);
}

變數 i 為所要輸出的倒數數字。countdown() 進行 i 的輸出,進行遞減運算,然後判斷 i 是否小於 0 ,是的話則將其重設為 10 。

最後調用 setTimeout() ,指定1000毫秒之後,重新執行第一個參數 countdown ,如此一來,遞減運算後的 i 值會重新被輸出。透過遞迴運算,這段程式碼將持續輸出 i ,以呈現倒數的動畫效果。





2 則留言:

匿名 提到...

使用遞迴的方式,是否會讓網頁變慢呢?
以這個例子來說,會一直無限遞迴下去

還是說會造成程式運行效率差的原因
是因為遞迴呼叫完之後,要返回上一層函式
而就是這個返回上一層涵式的動作
才導致整體時間複雜度累加很多

如果是這樣的話,此例中的情況是無限呼叫
似乎不會有返回上一層涵式的機會
這樣的話是不是就不會拖垮程式效能了呢?

康廷數位文教網 提到...

這個範例只是示範 setTimeout() 搭配遞廻實作重複呼叫的基本作法

不當的使用遞迴的確會造成效能問題,這一部份可以參考資料結構相關書籍都有說明,必須根據實際狀況撰寫,並非使用遞迴就會有效能的問題

無限呼叫的狀況只要在遞迴前加一個判斷式就可以阻斷了,一般都會這樣作,這裏的文章希望儘量簡單,有機會的話再開新的文章進行討論囉 :D