JavaScript setTimeout() – 延遲 N 秒的 JS 計(jì)時(shí)器

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

什么是setTimeout()在JavaScript？

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

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

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

讓我們分解一下語(yǔ)法。

功能

setTimeout() 將設(shè)置一個(gè)計(jì)時(shí)器，一旦計(jì)時(shí)器用完，該功能將運(yùn)行。

以毫秒為單位的延遲

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

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

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

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

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

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

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

參數(shù)

你還可以將可選參數(shù)傳遞給函數(shù)。

在此示例對(duì)話中，Britney 將提出問題，Ashley 的回復(fù)將延遲 3 秒。它將包括lunchMenu函數(shù)中的兩個(gè)可選參數(shù)。

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

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

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

超時(shí)ID

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

清除超時(shí)（）

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

這是基本語(yǔ)法。

clearTimeout(timeoutID)

在此示例中，消息將在 10 秒（10,000 毫秒）延遲后出現(xiàn)。但是如果用戶點(diǎn)擊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";
});

你應(yīng)該為 setTimeout() 傳入一個(gè)字符串而不是一個(gè)函數(shù)

傳遞字符串而不是函數(shù)被認(rèn)為是不好的做法和安全風(fēng)險(xiǎn)。

避免這樣寫setTimeout()：

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

一些代碼編輯器會(huì)警告您并建議您改用函數(shù)。

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

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

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

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

setInterval()與setTimeout()的語(yǔ)法：

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

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

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

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

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

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

真實(shí)項(xiàng)目示例

現(xiàn)在，我們知道如何setTimeout()和setInterval()工作，讓我們來(lái)看看它是如何能應(yīng)用到實(shí)際功能，在網(wǎng)站上的例子。

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

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

在animate()函數(shù)內(nèi)部，我們有另一個(gè)setTimeout()在進(jìn)度條已滿時(shí)將顯示 100% 。

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

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

總結(jié)

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

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

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

您還可以將可選參數(shù)傳遞給函數(shù)。

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

出于安全原因，不要使用字符串代替函數(shù)，這一點(diǎn)很重要。

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

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

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