JavaScript 中的計時器

Shraddha Paghdar 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 setTimeout() 建立一個計時器
  2. 在 JavaScript 中使用 setInterval() 建立一個計時器
JavaScript 中的計時器

JavaScript 提供了兩個定時器函式來執行非阻塞程式碼。JavaScript 提供了函式 setTimeout()setInterval(),它們在特定時間間隔後執行指定的表示式或函式。

在今天的帖子中,我們將瞭解有關 JavaScript 計時器的更多資訊。

在 JavaScript 中使用 setTimeout() 建立一個計時器

這是 JavaScript 提供的非同步函式,它在計時器到期後執行特定的函式或程式碼段。各種原因會導致超時延遲,例如巢狀超時、非活動標籤頁中的超時、跟蹤指令碼的限制以及頁面載入期間的超時延遲。

JavaScript 中 setTimeout() 的語法

setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(code[, delay]);

引數

  • function:這是一個強制性引數。它指定應該在時間過去後執行的函式。
  • code:這是一個強制性引數。如果使用者沒有傳遞函式,使用者可以傳遞一個字串,作為函式的替代。
  • 延遲:這是一個可選引數。在執行指定的程式碼或函式之前,此引數接受數值作為計時器(以毫秒為單位)。如果沒有傳遞任何值,則預設值為 0,這會導致立即執行。
  • arg1, ..., argN:這是一個可選引數。如果傳遞函式,則可以將函式的值作為附加引數傳遞。

返回值

這個 setTimeout() 方法返回一個正的 timeoutID,它有助於識別計時器。該值可用於 clearTimeout()

示例程式碼:

<button onclick="setTimeoutFunction()">Try set Timeout</button>
function addFn(a, b)
{
 console.log(a+b);
 return a+b;
}

function setTimeoutFunction() {
  setTimeout(addFn, 5000, 5, 10);
}

輸出:

15

在 JavaScript 中使用 setInterval() 建立一個計時器

setInterval() 方法由 JavaScript 提供。該方法在 workerwindow 介面上提供。它重複呼叫一個函式或執行一段程式碼。此程式碼在每次呼叫之間的固定時間延遲內執行。

setInterval()setTimeout() 函式之間的唯一區別是 setInterval() 重複呼叫函式,每次呼叫之間都有延遲,而 setTimeout() 在延遲後執行函式。

JavaScript 中 setTimeout() 的語法

setInterval(function[, delay, arg1, arg2, ...]);

引數

  • function:這是一個強制性引數。它指定應該在時間過去後執行的函式。
  • code:這是一個強制性引數。如果使用者沒有傳遞函式,使用者可以傳遞一個字串替代函式。
  • 延遲:這是一個可選引數。此引數接受在執行指定的程式碼或函式之前用作計時器的數值(以毫秒為單位)。如果沒有傳遞任何值,0 是預設值,這會導致立即執行。
  • arg1, ..., argN:這是一個可選引數。如果傳遞函式,則可以將函式的值作為附加引數傳遞。

返回值

這個 setInterval() 方法返回一個正的 intervalID,它有助於識別計時器。該值可用於 clearInterval()

示例程式碼:

<button onclick="setIntervalFunction()">Try set Interval</button>
function addFn(a, b)
{
 console.log(a+b);
 return a+b;
}

function setIntervalFunction() {
  setInterval(addFn, 5000, 5, 10);
}

輸出:

15
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Timer