JS定时器timer – JavaScript教程 JS定时器|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>

【JS定时器timer – JavaScript教程】注意：可以在技术上交换使用clearTimeout()和clearInterval()，但是，为了清晰和代码的可维护性，应该避免这样做。