Javascript定時器的使用例子詳解

在Javascript中有兩個函數可以實現"定時器"的功能setTimeout和setInterval，這兩個函數的參數是相同的，但是代表的意義有所差別。例如setTimeout('test()',3000);的意思是3000毫秒之後執行函數test()(僅僅執行一次)，setInterval('test()',3000); 表示每隔3000毫秒執行一次test()函數。一個是僅僅執行一次一個是不斷執行。我們編寫如下代碼：

代碼如下	複製代碼
<script> function test(){ alert('111'); } setInterval('test()',3000);//每隔3秒執行一次函數test() </script>

我們執行會看到每隔3秒會執行alert('111');不會停止，如果編寫如下代碼：

代碼如下	複製代碼
<script> function test(){ alert('111'); } setTimeout('test()',3000); //3秒之後執行一次(僅僅執行一次) </script>

運行會發現3秒後執行一次就不執行了，這就是兩者的差別，使用哪一個看我們的具體需求，其實變通一下也可以使setTimeout具有和setInterval同樣的功能，例如：

代碼如下	複製代碼
<script> function test(){ alert('111'); setTimeout('test()',3000);//函數內調用 } setTimeout('test()',3000); //3秒之後執行一次(僅僅執行一次) </script>

在函數內執行了setTimeout，這樣我們執行後會發現也是每隔3秒執行一次的。另外要注意的是，有時我們需要手動停止執行，例如我們使用定時器實現了圖片的漂浮功能（每隔一定時間設定圖片的座標），當滑鼠移動到圖片時我們需要定時器“失效”，這如何?呢？如果使用了setInterval那很好辦，在執行setInterval後，回返回一個timer ID，如果將該ID傳遞給函數clearInterval，就可以終止執行調用過的函數了，例如：

代碼如下	複製代碼
<div id="show">0</div> <script> function test(){ var obj = document.getElementById('show'); obj.innerHTML = parseInt(obj.innerHTML) + 1; } function start_add(){ time_id = setInterval('test()',500);//每隔0.5秒執行一次函數test() } </script> <input type="button" value="點擊開始執行" onclick="start_add();" /> <input type="button" value="點擊終止執行" onclick="clearInterval(time_id);" />

用setTimeout實現setInterval的功能

思路很簡單，就是在一個函數中調用不停執行自己，有點像遞迴

代碼如下	複製代碼
var i=0; function xilou(){ i+=1; if(i>10){alert(i);return;} setTimeout("xilou()",1000); //用這個也可以 //setTimeout(xilou,1000); }

3,在類中使用setTimeout

終於到正題了，其實在類中使用大家遇到的問題都是關於this的，只要解決了這個this的問題就萬事無憂了。
呵呵。讓我們來分析一下：

代碼如下

複製代碼

function xilou(){ this.name="xilou"; this.sex="男"; this.num=0; } xilou.prototype.count=function(){ this.num+=1; alert(this.num); if(this.num>10){return;} //下面用四種方法測試,一個一個輪流測試。 setTimeout("this.count()",1000);//A:當下面的x.count()調用時會發生錯誤：對象不支援此屬性或方法。 setTimeout("count()",1000);//B:錯誤顯示：缺少對象 setTimeout(count,1000);//C:錯誤顯示：'count'未定義 //下面是第四種 var self=this; setTimeout(function(){self.count();},1000);//D:正確 } var x=new xilou(); x.count();

錯誤分析：

A：中的this其實指是window對象，並不是指當前執行個體對象
B：和C：中的count()和count其實指的是單獨的一個名為count()的函數,但也可以是window.count(),因為window.count()可以省略為count()
D：將變數self指向當前執行個體對象，這樣js解析引擎就不會混肴this指的是誰了。

話說回來，雖然我們知道setTimeout("this.count()",1000)中的this指的是window對象，但還是不明白為什麼會是
window對象^_^(有點頭暈...)
那我們可以想象一下這個setTimeout是怎樣被定義的：
setTimeout是window的一個方法，全稱是這樣的：window.setTimeout()
那應該是這樣被定義的：

代碼如下	複製代碼
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){ //.....代碼 return timer//返回一個標記符 }

所以當向setTimeout()傳入this的時候，當然指的是它所屬的當前對象window了