javascript中的兩個定時函數setTimeOut()和setInterVal()的區別


js中經常性要用到間隔幾秒或暫停幾秒執行某個函數,

簡單介紹我從網上收集到setTimeOut()和setInterVal()的區別
1、setInterVal()介紹

1)定義

setInterval() 方法可按照指定的周期(以毫秒計)來執行函數或表達式。該方法會不停地循環調用函數,直到使用 clearInterval() 明確停止該函數或窗口被關閉。

clearInterval() 函數的參數即 setInterval() 返回的 ID 值。(也可理解為關閉定時函數的對象)

2)語法

setInterval(code,millisec[,"lang"])
code 必須。要調用的函數或要執行的代碼串。(可以直接alert("測試"),也可以是function方法)
millisec 必須。周期性執行或調用 code 之間的時間間隔,以毫秒計。

3)返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值(對象)

4)用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterVal用法</title>
</head>
<script type="text/javascript">
    var num = 0;
    var t;
    //開始計時方法
    function startInterVal(){
        document.getElementById("test").innerHTML = num;
        num = num+1;        
    }
    //setInterVal():按照指定的周期(以毫秒計)來調用函數或計算表達式
     t = window.setInterval("startInterVal()",1000);
    
     //結束計時方法
    function stopInterVal(){
        window.clearInterval(t);
    }
    
</script>
<body>
<form>
<input type="button" value="開始計時" onClick="startInterVal()">
<input type="button" value="結束計時" onclick="stopInterVal()" />

<div>計時: <span id="test"></span></div>
</form>
</body>
</html>
5)結果視圖

 

2、setTimeOut()介紹

1)定義:

setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式,該方法與 setInterval() 方法不同的是該方法只執行一次。

2)語法:

setTimeout(code,millisec)
code 必需。要調用的函數后要執行的 JavaScript 代碼串。
millisec 必需。在執行代碼前需等待的毫秒數,以毫秒計。

3)返回值:

一個可以傳遞給 Window.clearTimeOut() 從而取消對 code 執行的值(對象)

4)用法:

簡單例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeOut用法</title>
<script type="text/javascript">
    var num = 0;
    var t;
    //開始定時方法
    function startTimout(){
        //把數字進行累加賦值給test
        document.getElementById("test").innerHTML = num;
        num = num+1;
        //調用setTimeOut函數
        t= window.setTimeout("startTimout()",1000);
    }
    //清除定時方法
    function StopTimeOut(){
     window.clearTimeout(t);
    }
</script>
</head>
<body>
<form>
<input type="button" value="開始計時" onClick="startTimout()">
<input type="button" value="結束計時" onclick="StopTimeOut()" />

<div>計時:<span id="test"></span></div>
</form>
</body>
</html>

5) 結果視圖:

6)提示:

(1)setTimeout() 雖然是只執行一次代碼。但如果許要多次調用,除了使用 setInterval() 外還可以讓被執行的代碼里面自身再次調用 setTimeout() 方法已達到多次執行的目的。
(2)另外setTimeout()方法也同樣可以返回一個ID值,以方便使用clearInterval()方法對使用setTimeout()方法的取消。

 

參考網址:http://www.jb51.net/article/49942.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM