Javascript DHTML 執行個體編程（教程）（四）初級執行個體篇2—動畫

上篇說了動態建立結點和刪除結點的例子，這一篇說一些如何用setInterval和setTimeout做簡單的動畫。
文法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個函數名，也可以是一個執行的字串，但要注意的是，如果fn是一個可以執行的字串，且有參數，如window.setInterval("myFunction(obj)",1000)將可能拋出一個異常，這個時候，通常是你要傳遞一個對象參數，我建議用這樣的一個辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：

window.setInterval(function (){
myFunction(obj);},1000);

還有一種情況就是在一個"class"裡，即要執行this.myFunction(obj)如何?呢？

function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //建立一個this指標的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};

DHTML的全域方法setInterval和setTimeout，所謂全域，即在window層，不屬於DHTML的DOM元素的方法裡，這兩個有一些區別，網上也有很多說明，也就是setInterval是迴圈執行一個指定函數，setTimeout是只執行一次。例外說明一點，屬於window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。

它們都返回一個數字型的timerId，用於cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過案頭應用的朋友，可以把這個setInterval和setTimeout假想成建立一個線程，而timerId則是一個線程Id，而cleaverInterval/clearTimeout方法則是消毀這個線程。也許這樣可以更好的理解這兩個方法。

(在具體的應用中，我更驅向於用setTimeout。)

知道這兩個方法的功能，先來寫一個簡單的例子：

一個一秒後彈出的alert對話方塊。

<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>

每一秒建立一個新DIV結點的函數
<script>
function intervalExample() {
var div=document.createElement("div");
div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>

而實際應用中，setTimeout可以有一個另類一些的應用，比如相當於VB中的DoEvents函數，或者.net傳統型程式中Application.DoEvents();這樣的功能，也就是非同步處理，因為DHTML沒有多線程，所以說這個功能在很多的時候是為了給使用者覺得不是在假死狀態，或者給其它的程式按照代碼的邏輯繼續執行下去而不會阻塞或者也不會跳過一段代碼執行。

舉個例子。

下段代碼是沒有加setTimeout的。運行後，錨點會馬上指向hash2

<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>

這一段是加了setTimeout的，錨點會在3秒後指向hash1，再在3秒後指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
window.setTimeout(fn,doEventsDelay);
doEventsDelay+=3000;
}
DoEvents(function () {
window.location.hash="hash1";
doEventsDelay-=3000;
}
);
DoEvents(function () {
window.location.hash="hash2";
doEventsDelay-=3000;
}
);
</script>

下面我們做一個實用些的例子，比如一個動態顯示tip的動態菜單。

一、這裡只講解setTimeout的方法，setInterval的請看demo裡的代碼，還要註明一點（本例中有一個比較嚴重的問題是沒有解決的，這一問題我將留到以後再講解）是關於座標的。比如將下面代碼中的sliderShow放到一個table中，就可能會發現一些問題了。:D

思路，得到一個元素，相對這個元素的作標，再根據一個tip的容器從而做一個動畫，
主要用到的就是相對元素的X，Y座標，關於座標的一些屬性意義，參見：

而整個動畫的思路，見

注釋代碼：

xmlns="http://www.w3.org/1999/xhtml">

Slider Show Demo

click show setTimeout demo

sliderShow
tutorial of DHTML and javascript programming
by never-online, never-online.net