JavaScript setTimeout() – 延遲 N 秒的 JS 計時器

你有沒有想過是否有一種方法可以讓你的 JavaScript 代碼延遲幾秒鐘？在本文中，我將通過代碼示例解釋該方法是什么以及?setTimeout()?與setInterval()的詳細內容。

什么是setTimeout()在JavaScript？

setTimeout() 是一種在定時器運行完成后執(zhí)行一段代碼的方法。

這是該setTimeout()方法的語法。

let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);

讓我們分解一下語法。

功能

setTimeout() 將設置一個計時器，一旦計時器用完，該功能將運行。

以毫秒為單位的延遲

在此方法中，您可以指定希望函數延遲多少毫秒。1,000 毫秒等于 1 秒。

在本例中，消息將在 3 秒延遲后出現在屏幕上。（3,000 毫秒）

const para = document.getElementById("para");

function myMessage() {
  para.innerHTML = "I just appeared";
  console.log("message appeared");
}
setTimeout(myMessage, 3000);

如果setTimeout()方法中不存在延遲，則將其設置為零，消息將立即出現。

const para = document.getElementById("para");

function myMessage() {
  para.innerHTML = "No delay in this message";
  console.log("message appeared immediately");
}
setTimeout(myMessage);

參數

你還可以將可選參數傳遞給函數。

在此示例對話中，Britney 將提出問題，Ashley 的回復將延遲 3 秒。它將包括lunchMenu函數中的兩個可選參數。

const ashley = document.getElementById("ashley");

function lunchMenu(food1, food2) {
  ashley.innerHTML = `<strong>Ashley: </strong>I had ${food1} and ${food2}.`;
}

setTimeout(lunchMenu, 3000, "pizza", "salad");

超時ID

setTimeout()將返回timeoutID定時器的正整數和唯一 ID。

清除超時（）

此方法用于取消setTimeout(). 在方法內部，您必須引用timeoutID.

這是基本語法。

clearTimeout(timeoutID)

在此示例中，消息將在 10 秒（10,000 毫秒）延遲后出現。但是如果用戶點擊Stop Timer按鈕，那么setTimeout()將被取消。 const timerMsg = document.getElementById("message1");

const stopBtn = document.getElementById("stop");

function timerMessage() {
  timerMsg.innerHTML = "Thanks for waiting!";
}

let timeoutID = setTimeout(timerMessage, 10000);

stopBtn.addEventListener("click", () => {
  clearTimeout(timeoutID);
  timerMsg.innerHTML = "Timer was stopped";
});

你應該為 setTimeout() 傳入一個字符串而不是一個函數

傳遞字符串而不是函數被認為是不好的做法和安全風險。

避免這樣寫setTimeout()：

setTimeout("console.log('Do not do this');", 1000);

一些代碼編輯器會警告您并建議您改用函數。

在這種情況下，始終使用函數而不是字符串。

setTimeout(function () {
  console.log("Do this instead");
}, 1000);

如何setInterval()從不同setTimeout()？

與setTimeout()在延遲后僅執(zhí)行一次函數不同，setInterval()它將每隔設定的秒數重復一次函數。如果你想停止setInterval()，那么你使用clearInterval().

setInterval()與setTimeout()的語法：

let intervalID = setInterval(function, delay in milliseconds, argument1, argument2,...);

在這個例子中，我們有一條每秒被打印到屏幕上的銷售信息。

let intervalID = setInterval(() => {
  salesMsg.innerHTML += "<p>Sale ends soon. BUY NOW!</p>";
}, 1000);

在setTimeout()方法內部，我們使用clearInterval()10 秒后停止打印消息。

setTimeout(() => {
  clearInterval(intervalID);
}, 10000);

就像 with 一樣setTimeout()，您必須在方法中使用計時器的唯一 ID clearInterval()。

真實項目示例

現在，我們知道如何setTimeout()和setInterval()工作，讓我們來看看它是如何能應用到實際功能，在網站上的例子。

在這個例子中，我們有一個進度條，它會在頁面加載 2 秒后開始。在 中setTimeout()，只要條形寬度不是 100% ，我們setInterval()就會執(zhí)行該animate()函數。

setTimeout(() => {
  let intervalID = setInterval(() => {
    if (barWidth === 100) {
      clearInterval(intervalID);
    } else {
      animate();
    }
  }, 100);//this sets the speed of the animation
}, 2000);

在animate()函數內部，我們有另一個setTimeout()在進度條已滿時將顯示 100% 。

const animate = () => {
  barWidth++;
  progressBar.style.width = `${barWidth}%`;
  setTimeout(() => {
    loadingMsg.innerHTML = `${barWidth}% Completed`;
  }, 10100);
};

進度條只是您可以使用setTimeout()和創(chuàng)建的眾多動畫之一setInterval()。您也可以在構建在線游戲時使用這些方法。

總結

setTimeout() 是一種在定時器運行完成后執(zhí)行一段代碼的方法。

延遲以毫秒為單位設置，1,000 毫秒等于 1 秒。

如果setTimeout()方法中省略了延遲，則延遲設置為 0，函數將執(zhí)行。

您還可以將可選參數傳遞給函數。

setTimeout()將返回timeoutID定時器的正整數和唯一 ID。

出于安全原因，不要使用字符串代替函數，這一點很重要。

如果要取消，setTimeout()則需要使用clearTimeout()

如果您想在設定的秒數內重復執(zhí)行一段代碼，那么您可以使用setInterval().

setTimeout() 可用于構建基本的 JavaScript 動畫和在線游戲。