setInterval()和setTimeout()的用法和區(qū)別示例介紹

更新時間：2013年11月17日 16:38:36 作者：

setInterval()和setTimeout()想必大家并不陌生吧，接觸js的朋友都知道的，不過還是有一些新手朋友對兩者的用法不是很熟悉，下面簡要的為大家介紹下

1. setInterval() 用法_學習

 
//每隔一秒自動執(zhí)行方法 
var c=0; 
function showLogin() 
{ 
alert(c++); 
} 
//setInterval方法或字符串 ，毫秒，參數(shù)數(shù)組（方法的）) 
setInterval("showLogin()","1000"); 

2.setTimeout

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

//注意比較上面的兩種方法的不同。
下面再來一個執(zhí)行函數(shù)的：

復制代碼代碼如下:

 
var i=0; 
function test(){ 
i+=1; 
alert(i); 
} 
setTimeout("test()",1000); 

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

setTimeout有兩種形式
setTimeout(code,interval)
setTimeout(func,interval,args)
其中code是一個字符串
func是一個函數(shù).
注意"函數(shù)"的意義,是一個表達式,而不是一個語句.
比如你想周期性執(zhí)行一個函數(shù)
function a(){
//...
}
可寫為
setTimeout("a()",1000)
或
setTimeout(a,1000)
這里注意第二種形式中,是a,不要寫成a(),切記!!!
展開來說,不管你這里寫的是什么,如果是一個變量,一定是一個指向某函數(shù)的變量;如果是個函數(shù),那它的返回值就要是個函數(shù)
2,用setTimeout實現(xiàn)setInterval的功能（每隔一段時間自動執(zhí)行函數(shù)）
思路很簡單，就是在一個函數(shù)中調(diào)用不停執(zhí)行自己，有點像遞歸

復制代碼代碼如下:

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

3,在類中使用setTimeout
終于到正題了，其實在類中使用大家遇到的問題都是關(guān)于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()調(diào)用時會發(fā)生錯誤：對象不支持此屬性或方法。 
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()的函數(shù),但也可以是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> 