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: </p>

上面的例子将在 1 秒后重复执行 showTime() 函数。此函数检索计算机上的当前时间并将其显示在浏览器中。

停止执行代码或取消定时器

setTimeout()setInterval() 方法都返回一个唯一的 ID(一个正整数值,称为计时器标识符),它标识由这些方法创建的计时器。

此 ID 可用于禁用或清除计时器并预先停止执行代码。清除定时器可以使用两个函数完成: clearTimeout()clearInterval()

<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: </p>
 
<button onclick="stopClock();">Stop Clock</button>

注意: 理论上你可以互换使用 clearTimeout()clearInterval() 。但是,为了清晰和代码可维护性,你应该避免这样做。