你有沒(méi)有想過(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 將提出問(wèn)題,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)。但是如果用戶(hù)點(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)。
避免這樣寫(xiě)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è)例子中,我們有一條每秒被打印到屏幕上的銷(xiāo)售信息。
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 秒后開(kāi)始。在 中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)度條已滿(mǎn)時(shí)將顯示 100% 。
const animate = () => {
barWidth++;
progressBar.style.width = `${barWidth}%`;
setTimeout(() => {
loadingMsg.innerHTML = `${barWidth}% Completed`;
}, 10100);
};
進(jìn)度條只是您可以使用setTimeout()
和創(chuàng)建的眾多動(dòng)畫(huà)之一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)畫(huà)和在線游戲。