詳解兩種常見的JS延時方法

在JavaScript中，我們經常需要進行延遲操作來實現一些特定的功能，例如在網頁中展示動畫或執行非同步請求時，都需要控制JS的執行時間。本文將介紹兩種常見的JS延時方法，包括setTimeout和setInterval函數。

一、setTimeout函數

使用setTimeout函數可以實現在一定時間後執行某個函數或程式碼片段。此函數接收兩個參數，第一個參數是要執行的函數或程式碼片段，第二個參數是延時的時間，單位為毫秒。例如：

setTimeout(function() {
    console.log('Hello World!');
}, 1000);

上述程式碼表示在1秒後將「Hello World！」印到控制台上。我們也可以使用箭頭函數的形式來寫：

setTimeout(() => console.log('Hello World!'), 1000);

若想要在延時結束前取消某個setTimeout操作，可以使用clearTimeout函數，此函數接收一個setTimeout的唯一識別碼作為參數。

let timeoutId = setTimeout(() => console.log('Hello World!'), 1000);
clearTimeout(timeoutId);

在上述程式碼中，我們首先透過setTimeout函數建立一個延遲的操作，並將其識別碼儲存在timeoutId變數中，然後立刻清除了該延遲操作。

二、setInterval函數

setInterval函數與setTimeout函數類似，也是用來實現操作的延時。不同的是，setInterval函數會每隔一段時間循環執行一個指定的函數或程式碼片段，直到被停止。此函數接收兩個參數，第一個參數為要執行的函數或程式碼片段，第二個參數為兩次執行間隔的時間，單位為毫秒。例如：

setInterval(function() {
    console.log('I am running!');
}, 1000);

上述程式碼表示每隔1秒輸出一次‘I am running!’。

如果需要停止setInterval迴圈執行某個函數，可以使用clearInterval函數，該函數接收一個setInterval的唯一識別碼作為參數。

let intervalId = setInterval(() => console.log('I am running!'), 1000);
clearInterval(intervalId);

在上述程式碼中，我們首先透過setInterval函數建立循環執行的操作，並將其識別碼儲存在intervalId變數中，然後立刻停止了該操作。

總結

setTimeout和setInterval函數在前端開發中非常常見，透過它們可以使JS程式得到更精確的控制與調度。在具體實作時，請務必注意參數的設定和使用clearTimeout或clearInterval函數進行操作的取消，避免意外結果。希望本文可以對JS新手們有幫助。

以上是詳解兩種常見的JS延時方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！