|
|
語(yǔ)法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個(gè)函數(shù)名，也可以是一個(gè)執(zhí)行的字符串，但要注意的是，如果fn是一個(gè)可以執(zhí)行的字符串，且有參數(shù)，如window.setInterval("myFunction(obj)",1000)將可能拋出一個(gè)異常，這個(gè)時(shí)候，通常是你要傳遞一個(gè)對(duì)象參數(shù)，我建議用這樣的一個(gè)辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：
window.setInterval(function (){
myFunction(obj);},1000);
還有一種情況就是在一個(gè)"class"里，即要執(zhí)行this.myFunction(obj)如何實(shí)現(xiàn)呢？
function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //創(chuàng)建一個(gè)this指針的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};
DHTML的全局方法setInterval和setTimeout，所謂全局，即在window層，不屬于DHTML的DOM元素的方法里，這兩個(gè)有一些區(qū)別，網(wǎng)上也有很多說明，也就是setInterval是循環(huán)執(zhí)行一個(gè)指定函數(shù)，setTimeout是只執(zhí)行一次。例外說明一點(diǎn)，屬于window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。
它們都返回一個(gè)數(shù)字型的timerId，用于cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過桌面應(yīng)用的朋友，可以把這個(gè)setInterval和setTimeout假想成創(chuàng)建一個(gè)線程，而timerId則是一個(gè)線程Id，而cleaverInterval/clearTimeout方法則是消毀這個(gè)線程。也許這樣可以更好的理解這兩個(gè)方法。
(在具體的應(yīng)用中，我更驅(qū)向于用setTimeout。)
知道這兩個(gè)方法的功能，先來寫一個(gè)簡(jiǎn)單的例子：
一個(gè)一秒后彈出的alert對(duì)話框。
<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>
每一秒創(chuàng)建一個(gè)新DIV結(jié)點(diǎn)的函數(shù)
<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>
而實(shí)際應(yīng)用中，setTimeout可以有一個(gè)另類一些的應(yīng)用，比如相當(dāng)于VB中的DoEvents函數(shù)，或者.NET桌面程序中Application.DoEvents();這樣的功能，也就是異步處理，因?yàn)镈HTML沒有多線程，所以說這個(gè)功能在很多的時(shí)候是為了給用戶覺得不是在假死狀態(tài)，或者給其它的程序按照代碼的邏輯繼續(xù)執(zhí)行下去而不會(huì)阻塞或者也不會(huì)跳過一段代碼執(zhí)行。
舉個(gè)例子。
下段代碼是沒有加setTimeout的。運(yùn)行后，錨點(diǎn)會(huì)馬上指向hash2
<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>
這一段是加了setTimeout的，錨點(diǎn)會(huì)在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>
下面我們做一個(gè)實(shí)用些的例子，比如一個(gè)動(dòng)態(tài)顯示tip的動(dòng)態(tài)菜單。
一、這里只講解setTimeout的方法，setInterval的請(qǐng)看demo里的代碼，還要注明一點(diǎn)（本例中有一個(gè)比較嚴(yán)重的問題是沒有解決的，這一問題我將留到以后再講解）是關(guān)于坐標(biāo)的。比如將下面代碼中的sliderShow放到一個(gè)table中，就可能會(huì)發(fā)現(xiàn)一些問題了。:D
思路，得到一個(gè)元素，相對(duì)這個(gè)元素的作標(biāo)，再根據(jù)一個(gè)tip的容器從而做一個(gè)動(dòng)畫，
主要用到的就是相對(duì)元素的X，Y坐標(biāo)，關(guān)于坐標(biāo)的一些屬性意義，參見下圖：
而整個(gè)動(dòng)畫的思路，見下圖
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]是否覺得上面的例子很多都是重復(fù)的勞動(dòng)？如果減少一些豈不更好？:D，的確如此，上面的JS代碼有近一半都是重復(fù)的，在這里我就不把它優(yōu)化了，還是留給大家做一些實(shí)質(zhì)性的工作，減少上面代碼的冗余。
JavaScript技術(shù)：Javascript &amp; DHTML 實(shí)例編程（教程）（四）初級(jí)實(shí)例篇2―動(dòng)畫，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
