JavaScript 计时器

在 JavaScript 中，创建一个计时器是为了在特定时间执行某个任务或任何函数。基本上，计时器用于延迟程序的执行或以固定的时间间隔执行 JavaScript 代码。借助计时器，我们可以延迟代码的执行。因此，代码不会在事件触发或页面加载的同一时间完成其执行。

计时器的最佳示例是网站上的广告横幅，它们每 2-3 秒更改一次。这些广告横幅在 Amazon 等网站上以固定的时间间隔更改。我们设置一个时间间隔来更改它们。在本章中，我们将向您展示如何创建计时器。

JavaScript 提供了两个计时器函数 **setInterval()** 和 **setTimeout()**，它们有助于延迟代码执行，也允许重复执行一项或多项操作。我们将详细讨论这两个计时器函数及其示例。

示例

以下是一些使用这些函数的 JavaScript 计时器示例。

setTimeout()

setTimeout() 函数帮助用户延迟代码的执行。setTimeout() 方法接受两个参数，其中一个是用户定义的函数，另一个是用于延迟执行的时间参数。时间参数以毫秒为单位（1 秒 = 1000 毫秒），可以省略。

setTimeout() 的基本语法是

我们将使用 setTimeout() 函数将消息打印延迟 3 秒。消息将在代码执行 3 秒后显示在网页上，而不是立即显示。现在，让我们看看下面的代码，了解它是如何工作的

延迟执行代码

输出

上面的代码将分两部分执行。首先，代码的 HTML 部分将执行，其中单击 **“单击此处”** 按钮后，其余 JavaScript 代码将在 3 秒后执行。请看下面的输出

单击 **“单击此处”** 按钮后，其余代码将在 3 秒后执行。消息 **“欢迎来到 TpointTech”** 将在 3 秒（3000 毫秒）后显示在网页上。

setInterval()

setInterval 方法与 setTimeout() 函数有些相似。它会以固定的时间间隔重复执行指定的函数。或者我们可以简单地说，一个函数会根据用户在此函数中提供的特定时间量重复执行。 **例如 -** 每五秒显示一次更新的时间。

setInterval() 的基本语法是

与 setTimeout() 方法类似，它也接受两个参数，其中一个是用户定义的函数，另一个是用于在执行函数之前等待的时间间隔参数。时间间隔参数以毫秒为单位（1 秒 = 1000 毫秒），可以省略。现在，请看下面的代码，了解此函数的工作原理

以固定时间间隔执行代码

输出

执行上述代码后，响应将是一个简单的 HTML 语句，没有时间字符串，如下面的输出所示

4 秒后，JavaScript 函数将被调用并开始显示时间。这将每四秒重复一次显示您的系统时间。

示例

setInterval() 方法的另一个示例，每 4 秒连续显示一条消息字符串。

输出

执行上述代码后，浏览器将显示带有按钮的消息。单击此按钮可进一步处理并查看接下来会发生什么。

通过单击此 **“单击此处”** 按钮，waitAndshow() 将开始每 4 秒在网页上重复打印消息 **“欢迎来到 TpointTech”** 。

您已经看到了如何创建计时器或设置时间间隔。有时，我们需要取消这些计时器。JavaScript 提供了内置函数来清除计时器，如下所示：

取消或停止计时器

JavaScript 提供了两个函数 **clearTimeout()** 和 **clearInterval()** 来取消或停止计时器并停止代码执行。setTimeout() 和 setInterval() 都返回唯一的 ID。这些 ID 用于 clearTimeout() 和 clearInterval() 来清除计时器并提前停止代码执行。它们都只接受一个参数，即 ID。

示例

在此示例中，我们将使用 clearTimeout() 来清除由 setTimeout() 函数设置的计时器。请看下面的示例，了解 clearInterval() 如何与 setInterval() 一起工作。

禁用固定时间间隔

输出

执行上述代码后，当前系统时间将开始显示在网页上，并以 3 秒的固定时间间隔更新。此页面还有一个禁用此计时器的按钮。

计时器将每三秒显示一次更新的时间。如果您单击此 **“停止时钟”** 按钮，计时器将被禁用，停止显示更新的时间。