DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> setInterval()和setTimeout()的用法和區別示例介紹
setInterval()和setTimeout()的用法和區別示例介紹
編輯:JavaScript基礎知識     
1. setInterval() 用法_學習
復制代碼 代碼如下:
//每隔一秒自動執行方法
var c=0;
function showLogin()
{
alert(c++);
}
//setInterval方法或字符串 ,毫秒,參數數組(方法的))
setInterval("showLogin()","1000");

2.setTimeout

setTimeout()在js類中的使用方法
setTimeout (表達式,延時時間)
setTimeout(表達式,交互時間)
延時時間/交互時間是以豪秒為單位的(1000ms=1s)setTimeout 在執行時,是在載入後延遲指定時間後,去執行一次表達式,僅執行一次setTimeout 在執行時,它從載入後,每隔指定的時間就執行一次表達式
1,基本用法:
執行一段代碼:
var i=0;
setTimeout("i+=1;alert(i)",1000);
執行一個函數:
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

//注意比較上面的兩種方法的不同。
下面再來一個執行函數的:
復制代碼 代碼如下:
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);

也可以這樣:
setTimeout(test,1000);
總結:
setTimeout的原型是這樣的:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有兩種形式
setTimeout(code,interval)
setTimeout(func,interval,args)
其中code是一個字符串
func是一個函數.
注意"函數"的意義,是一個表達式,而不是一個語句.
比如你想周期性執行一個函數
function a(){
//...
}
可寫為
setTimeout("a()",1000)

setTimeout(a,1000)
這裡注意第二種形式中,是a,不要寫成a(),切記!!!
展開來說,不管你這裡寫的是什麼,如果是一個變量,一定是一個指向某函數的變量;如果是個函數,那它的返回值就 要是個函數
2,用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了。

簡單實例:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>

<body>
<h1 id="id1">My Heading 1</h1>
<button type="button" id="click" onClick="change()">
點擊這裡!</button>

</body>
<script>
var i=1;

function clickButton(){
document.getElementById("click").click();
i++;

}
setInterval("clickButton()","1000");
//setTimeout("clickButton()",1000);
//setTimeout(clickButton,1000);
function change(){
if(i%2==1)
document.getElementById('id1').style.color='red';
else
document.getElementById('id1').style.color='black';

}

</script>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved