JavaScript 计时器
在本教程中，您将了解 JavaScript 中的计时器函数。
使用计时器
计时器是一个函数，它使我们能够在特定时间执行一个函数。
使用计时器，您可以延迟代码的执行，以便它不会在触发事件或加载页面的确切时刻完成。 例如，您可以使用计时器来定期更改您网站上的广告横幅，或者显示实时时钟等。JavaScript 中有两个计时器函数：setTimeout() 和 >setInterval()。
以下部分将向您展示如何创建计时器以延迟代码执行，以及如何在 JavaScript 中使用这些函数重复执行一项或多项操作。
延迟后执行代码
setTimeout() 函数用于在一定时间后只执行一次函数或指定的一段代码。 它的基本语法是setTimeout(function, milliseconds)。
该函数接受两个参数：一个 function，它是要执行的函数，以及一个可选的 delay 参数，它是毫秒数，表示在此之前等待的时间量 执行函数（1 秒 = 1000 毫秒）。 让我们看看它是如何工作的：
<script>
function myFunction() {
alert('Hello World!');
}
</script>
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>上面的示例将在单击按钮 2 秒后显示一条警报消息。
注意： 如果省略或未指定 delay 参数，则使用 0 的值，即"立即"执行指定的函数，或者尽快执行。
定期执行代码
同样，您可以使用 setInterval() 函数以固定的时间间隔重复执行一个函数或指定的一段代码。 它的基本语法是setInterval(function, milliseconds)。
该函数还接受两个参数：一个 function，它是要执行的函数，以及 interval，它是毫秒数，表示在执行之前等待的时间量。 函数（1 秒 = 1000 毫秒）。 这是一个例子：
<script>
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
<p>The current time on your computer is: <span id="clock"></span></p>上例将在 1 秒后重复执行 showTime() 函数。 此功能检索您计算机上的当前时间并将其显示在浏览器中。
停止代码执行或取消定时器
两个 setTimeout() 和 setInterval() 方法都返回一个唯一的 ID（一个正整数值，称为计时器标识符），用于标识由这些方法创建的计时器。
此 ID 可用于禁用或清除计时器并预先停止代码的执行。 可以使用两个函数来清除计时器：clearTimeout() 和 clearInterval()。
setTimeout() 函数采用单个参数，一个 ID，并清除与该 ID 关联的 setTimeout() 计时器，如以下示例所示：
<script>
var timeoutID;
function delayedAlert() {
timeoutID = setTimeout(showAlert, 2000);
}
function showAlert() {
alert('This is a JavaScript alert box.');
}
function clearAlert() {
clearTimeout(timeoutID);
}
</script>
<button onclick="delayedAlert();">Show Alert After Two Seconds</button>
<button onclick="clearAlert();">Cancel Alert Before It Display</button>类似地，clearInterval() 方法用于清除或禁用 setInterval() 计时器。
<script>
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock() {
clearInterval(intervalID);
}
var intervalID = setInterval(showTime, 1000);
</script>
<p>The current time on your computer is: <span id="clock"></span></p>
<button onclick="stopClock();">Stop Clock</button>注意： 注意： 从技术上讲，您可以互换使用 clearTimeout() 和 clearInterval()。 但是，为了清晰和代码可维护性，您应该避免这样做。