你有没有想过，是否有一种方法可以将你的JavaScript代码延迟几秒钟？
在这篇文章中，我将通过代码实例解释什么是setTimeout() ，以及它与setInterval() 的区别。
什么是JavaScript中的setTimeout() ？
setTimeout() 是一种方法，它将在定时器运行完毕后执行一段代码。
下面是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");
timeoutID
setTimeout() 将返回 ，它是一个正整数，是计时器的唯一ID。timeoutID
clearTimeout()
该方法用于取消一个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);
如果你想了解更多关于隐含的eval的安全风险，请在MDN docs的Never Use Eval部分阅读。
setInterval() 与setTimeout() 有什么不同？
与setTimeout() 不同的是，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);
就像setTimeout() ，你必须在clearInterval() 方法中使用计时器的唯一ID。
真实项目实例
现在我们了解了setTimeout() 和setInterval() 的工作原理，让我们来看一个例子，看看它是如何应用于网站上的一个真实功能。
在这个例子中，我们有一个进度条，将在页面加载2秒后开始。在setTimeout() 里面，我们有一个setInterval() ，只要条形宽度不是100%，就会执行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() 和setInterval() 创建的许多动画中的一个。你也可以在构建网络游戏时使用这些方法。
在Beau Carnes的How to Build A Simon Game中，你可以看到setTimeout() 和setInterval() 在游戏逻辑中的使用。
结论
setTimeout() 是一个方法，它将在定时器运行完毕后执行一段代码:
let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);
延迟的单位是毫秒，1,000毫秒等于1秒。
如果在setTimeout() 方法中省略了延迟，那么延迟将被设置为0，函数将执行。
你也可以有可选的参数，这些参数被传递到函数中。
setTimeout() 将返回 ，这是一个正整数，是计时器的唯一ID。timeoutID
为了安全起见，重要的是不要用字符串来代替函数:
setTimeout("console.log('Do not do this');", 1000);
如果你想取消setTimeout() ，那么你需要使用clearTimeout()
clearTimeout(timeoutID)
如果你想在设定的秒数内重复执行一段代码，那么你将使用setInterval() :
let intervalID = setInterval(() => {
// this code runs every second
}, 1000);
setTimeout() 可以用于建立基本的JavaScript动画和网络游戏。
我希望你喜欢这篇关于setTimeout() 。
