JavaScript setTimeout() 介紹

導讀	setTimeout() 是屬於 window 的方法，該方法用於在指定的毫秒數後呼叫函式或計算表示式。

語法格式可以是以下兩種：

setTimeout(要執行的程式碼, 等待的毫秒數)
setTimeout(JavaScript 函式, 等待的毫秒數)

接下來我們先來看一個簡單的例子：

例項

setTimeout("alert('對不起, 要你久候')", 3000 )

在測試程式碼中我們可以看到頁面在開啟三秒後, 就會出現一個 alert 對話方塊。

setTimeout() 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的程式碼, 如下圖:

setTimeout() 也可以用來執行指定的函式(function)，如下例項，網頁上的文字會在三秒後消修改。

例項

<p id="content"> 請等三秒鐘!</p>  <script>  setTimeout("changeState()",3000 );  
function changeState(){  
    let content=document.getElementById('content');  
    content.innerHTML="<div style='color:red'>我是三秒後顯示的內容！</div>";  
}  
</script>

例項中設定了等待 3 秒 (3000 milliseconds) 後瀏覽器就會執行 changeState( ) 這一個函式。

接下來我們可以透過 setTimeout() 不斷執行指定函式來實現一個計數器：

例項

<input type="text" id="displayBox" name="displayBox" value="0">
 <script>x = 0
function countSecond() 
{　
    x = x+1
    document.getElementById("displayBox").value=x 
    setTimeout("countSecond()", 1000)
}
// 執行函式
countSecond()</script>

例項中頁面在載入後執行 countSecond() 函式，該函式內使用了 setTimeout() 方法，該方法在每隔一秒呼叫 countSecond() 函式，所以最終會導致 countSecond( ) 每秒執行一次，實現計數效果。

當然我們也可以在計數器的函式上新增一些片段，實現在指定條件下停止計數：

例項

<input type="text" id="displayBox" name="displayBox" value="0">
 <script>x = 0
function countSecond() 
{　
    if(x<20) {        x = x+1
        document.getElementById("displayBox").value=x 
        setTimeout("countSecond()", 1000)
    }
}
// 執行函式countSecond()
</script>

例項中在 x 小於 20 的時候會每秒執行一次 countSecond() 函式，在 x 大於等於20 的時候就會停止執行。

既然有開始計數，那麼相對應的就要有停止計數，停止計時使用的函式為 clearTimeout()。

setTimeout() 方法可以使到瀏覽器不斷執行一段程式碼或一個函式 當一個 setTimeout( ) 開始了迴圈的工作, 我們要使它停下來, 可使用 clearTimeout( ) 這方法。

clearTimeout() 語法：

clearTimeout(timeoutID)

timeoutID 為呼叫 setTimeout() 函式時所獲得的返回值，使用該返回識別符號作為引數，可以取消該 setTimeout() 所設定的定時執行操作。

meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

使用 meter1 與 meter2 作為 timeoutID 的名稱, 在設定 clearTimeout( ) 時, 就可指定對哪一個 setTimeout() 有效, 不會影響另一個 setTimeout() 的操作。

如下例項：
例項

<form name="display1">   
    <input type="text" id="box1" name="box1" value="0" size="4" />   
    <input type="button" value="停止計時" onclick="clearTimeout(meter1)" />   
    <input type="button" value="繼續計時" onclick="count1() " />   </form>   <p></p>  <form name="display2">   
    <input type="text" id="box2" name="box2" value="0" size="4" />   
    <input type="button" value="停止計時" onclick="clearTimeout(meter2) " />   
    <input type="button" value="繼續計時" onclick="count2( ) " />   </form>   <script>  x = 0  
y = 0  
  
function count1( )  
{　
    x = x+ 1  
    document.getElementById("box1").value= x  
    meter1=setTimeout("count1()", 1000)  
}
 
function count2( )
{　
    y = y+ 1  
    document.getElementById("box2").value= y  
    meter2=setTimeout("count2()", 1000)  
}  
// 執行函式
count1( )  
count2( )  
</script>

原文來自：