JavaScript计时器

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

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

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

例子

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

setTimeout()

setTimeout()函数可帮助用户延迟执行代码。 setTimeout()方法接受两个参数，其中一个是用户定义的函数，另一个是延迟执行的时间参数。 time参数保存以毫秒为单位的时间(1秒= 1000毫秒)，可以选择是否传递。

setTimeout()的基本语法为：

setTimeout(function, milliseconds)

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

延迟后执行代码

 Example of delay the execution of function 
 


 Click Here 

输出量

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

单击“单击此处”按钮后，其余代码将在3秒钟后执行。 3秒钟(3000毫秒)后，将在Web上显示一条欢迎使用javaTpoint消息。

setInterval()

setInterval方法有点类似于setTimeout()函数。在一个时间间隔后，它将重复执行指定的函数。或者我们可以简单地说一个函数在用户为此函数提供的特定时间后重复执行。例如-每五秒钟显示一次更新时间。

setInterval()的基本语法为：

setInterval(function, milliseconds)

与setTimeout()方法类似，它也接受两个参数，其中一个是用户定义的函数，另一个是在执行该函数之前要等待的时间间隔参数。 time-interval参数保存以毫秒为单位的时间量(1秒= 1000毫秒)，可以选择是否传递。现在，请参见下面的代码此函数的工作方式：

定期执行代码

 Updated time will show in every 4 seconds 
 The current time on your computer is: 

 

输出量

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

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

例

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

 A string will show in every 4 seconds 

 Click Here 

输出量

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

通过单击此Click Here按钮，waitAndshow()将开始每隔4秒钟在网络上重复打印消息Welcome to Javatpoint。

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

取消或停止计时器

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

例

在此示例中，我们将使用clearTimeout()清除通过setTimeout()函数设置的计时器。看一下示例clearInterval()与setInterval()一起工作的方式。

禁用常规间隔

 
Current system time:   


 Stop Clock 

输出量

通过执行上述代码，当前系统时间将以3秒钟的固定间隔开始显示在Web上。该页面上还有一个按钮来禁用此计时器。

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