JavaScript 计时器

在JavaScript中，计时器被用来在特定时间执行任务或任何函数。基本上，计时器用于延迟程序的执行或以规律的时间间隔执行JavaScript代码。借助计时器，我们可以延迟代码的执行。因此，当事件触发或页面加载时，代码不会立即完成执行。

计时器的最佳示例是网站上的广告横幅，它们每隔2到3秒钟就会变化一次。像亚马逊这样的网站会在一定的时间间隔内更换广告横幅。我们设置一个时间间隔来更换它们。在本章中，我们将展示如何创建计时器。

JavaScript提供了两个计时器函数 setInterval() 和 setTimeout() ，它们可以延迟代码的执行，并允许执行一个或多个操作。我们将详细讨论这两个计时器函数，以及它们的示例。

示例

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

setTimeout()

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

setTimeout()的基本语法如下：

setTimeout(function, milliseconds)

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

延迟后执行代码

<html>
<body>
<script>
function delayFunction() {
    //display the message on web after 3 seconds on calling delayFunction
    document.write('<h3> Welcome to JavaTpoint <h3>'); 
}
</script>
<h4> Example of delay the execution of function <h4> 

<!?button for calling of user-defined delayFunction having 3 seconds of delay -->
<button onclick = "setTimeout(delayFunction, 3000)"> Click Here </button>

</body>
</html>

输出

上面的代码将分两部分执行。首先，代码的HTML部分将会执行，在点击 Click Here 按钮之后，剩余的JavaScript代码将在3秒后执行。请见下方输出：

JavaScript 计时器

点击 点击这里 按钮后，剩余的代码将在3秒后执行。在3秒后（3000毫秒），网页上将显示一条消息： 欢迎来到javaTpoint 。

JavaScript 计时器

setInterval()

setInterval方法跟setTimeout()函数有点类似。它会在一段时间间隔之后重复执行指定的函数。也可以简单地说，一个函数在该函数中提供的特定时间间隔后重复执行。 例如 – 每五秒钟显示更新后的时间。

setInterval()的基本语法是：

setInterval(function, milliseconds)

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

在固定时间间隔内执行代码

<html>
<body>
<script>
function waitAndshow() {
       //define a date and time variable
       var systemdate = new Date();

       //display the updated time after every 4 seconds
       document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
}

      //define time interval and call user-defined waitAndshow function
      setInterval(waitAndshow, 4000);
</script>

<h3> Updated time will show in every 4 seconds </h3>
<h3> The current time on your computer is: <br>
<span id="clock"></span> </h3>

</body>
</html>

输出

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

JavaScript 计时器

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

JavaScript 计时器

示例

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

<html>
<body>
<script>
function waitAndshow() {
    //display the message on web on calling delayFunction
    document.write('<h3> Welcome to JavaTpoint <h3>'); 
}
</script>
<h3> A string will show in every 4 seconds </h3>
<!-- call user-defined delayFunction after 4 seconds -->
<button onclick = "setInterval(waitAndshow, 4000)"> Click Here </button>

</body>
</html>

输出

在执行上述代码时，浏览器将显示一个带有按钮的消息。点击该按钮以进行更多处理并查看接下来会发生什么。

JavaScript 计时器

点击这个 点击这里 按钮，waitAndShow()函数将会每4秒在网页上重复打印 欢迎来到Javatpoint 这条信息。

JavaScript 计时器

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

取消或停止计时器

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

示例

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

禁用定期间隔

<html>
<body>
<script>
function waitAndshow() {
  //define a date and time variable
  var systemdate = new Date();

  //display the updated time after every 4 seconds
  document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
}

 //function to disable the time interval
function stopClock() {
    clearInterval(intervalID);
}

//define time interval and call user-defined waitAndshow function
var intervalID = setInterval(waitAndshow, 3000);
</script>

<p>Current system time: <span id="clock"> </span> </p>

<!-- button to stop showing time in a regular interval -->
<button onclick = "stopClock();" > Stop Clock </button>
</body>
</html>

输出

通过执行上述代码，当前系统时间将以3秒的规律间隔显示在网页上。此页面还有一个按钮可以禁用这个计时器。

JavaScript 计时器