JS定时器timer – JavaScript教程

上一章JavaScript教程请查看：JS创建对话框

在本教程中，你将了解JavaScript中的定时器函数。

使用定时器

定时器是一个函数，它使我们能够在特定的时间执行一个函数。

使用计时器可以延迟代码的执行，这样就不会在触发事件或加载页面的确切时刻执行。例如，你可以使用计时器来定期更改网站上的广告横幅，或显示实时时钟等。JavaScript中有两个定时器函数：setTimeout()和setInterval()。

下面的小节将向你展示如何创建计时器来延迟代码执行，以及如何在JavaScript中使用这些函数重复执行一个或多个操作。

延迟执行代码

setTimeout()函数用于在一段时间之后只执行一次函数或指定的代码段，它的基本语法是setTimeout(函数，毫秒)。

此函数接受两个参数：一个函数(即要执行的函数)和一个可选的延迟参数(即表示在执行函数之前等待的时间量的毫秒数)。让我们看看它是如何工作的:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">点击</button>

上面的示例将在单击按钮2秒后显示警告消息。

注意：如果忽略或未指定delay参数，则使用0值，这意味着指定的函数将“立即”执行，或者“尽快”执行。

定时执行代码

类似地，可以使用setInterval()函数以固定的时间间隔重复执行一个函数或指定的代码段，它的基本语法是setInterval(函数，毫秒)。

这个函数还接受两个参数:一个函数(要执行的函数)和interval(表示在执行函数之前等待的时间)(1秒= 1000毫秒)。这里有一个例子:

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>计算机上的当前时间是: <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('这是一个JavaScript警告框.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">两秒钟后显示警告</button>
 
<button onclick="clearAlert();">显示之前取消警报</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>计算机上的当前时间是: <span id="clock"></span></p>
 
<button onclick="stopClock();">停止</button>

注意：可以在技术上交换使用clearTimeout()和clearInterval()，但是，为了清晰和代码的可维护性，应该避免这样做。