setInterval()和setTimeout()的用法和區別範例介紹_基礎知識

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🎜>var i🎜>var i🎜>var =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了。

簡單實例：

複製程式碼 程式碼如下:

程式碼如下:

My Heading 1

點這裡！


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

}