JavaScript教程-JavaScript计时器

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

最好的计时器示例是网站上的广告横幅，它们每隔2-3秒就会更换。像亚马逊这样的网站上的广告横幅会在规定的时间间隔内更换。在本章中，我们将展示如何创建计时器。

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

示例

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

setTimeout()

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

setTimeout()的基本语法是：

setTimeout(function, milliseconds)

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

延迟一段时间后执行代码

<!DOCTYPE html>
<html>
<head>
  <title>延迟执行函数的示例</title>
</head>
<body>
  <script>
    function delayFunction() {
      // 在调用delayFunction后的3秒后在网页上显示消息
      document.write('<h3>Welcome to JavaTiku</h3>');
    }
  </script>
  
  <h4>延迟执行函数的示例</h4>
  
  <!-- 点击按钮后延迟3秒调用用户定义的delayFunction -->
  <button onclick="setTimeout(delayFunction, 3000)">点击这里</button>
</body>
</html>

输出

上述代码将分为两部分执行。首先，HTML部分的代码将执行，在点击点击这里按钮后，剩余的JavaScript代码将在3秒后执行。查看下面的输出：

点击点击这里按钮后，剩余的代码将在3秒后执行。消息Welcome to JavaTiku将在3秒（3000毫秒）后显示在网页上。

setInterval()

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

setInterval()的基本语法是：

setInterval(function, milliseconds)

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

定期间隔执行代码

<!DOCTYPE html>
<html>
<head>
  <title>定期间隔执行代码的示例</title>
</head>
<body>
  <script>
    function waitAndshow() {
      // 定义一个日期和时间变量
      var systemdate = new Date();
      
      // 每隔4秒后显示更新的时间
      document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
    }
    
    // 定义时间间隔并调用用户定义的waitAndshow函数
    setInterval(waitAndshow, 4000);
  </script>
  
  <h3>每隔4秒将显示更新的时间</h3>
  <h3>当前计算机时间是：</h3>
  <span id="clock"></span>
</body>
</html>

输出

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

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

示例

再来看一个setInterval()方法的示例，用于连续每隔4秒显示一条消息字符串。

<!DOCTYPE html>
<html>
<head>
  <title>连续每隔4秒显示消息字符串的示例</title>
</head>
<body>
  <script>
    function waitAndshow() {
      // 在调用waitAndshow时在网页上显示消息
      document.write('<h3>Welcome to JavaTiku</h3>');
    }
  </script>
  
  <h3>每隔4秒将显示一条消息字符串</h3>
  <!-- 调用用户定义的waitAndshow函数，每隔4秒 -->
  <button onclick="setInterval(waitAndshow, 4000)">点击这里</button>
</body>
</html>

输出

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

通过点击点击这里按钮，waitAndshow()将开始在每4秒在网页上重复显示消息Welcome to Javatiku。

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

取消或停止计时器

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

示例

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

停用定期间隔

<!DOCTYPE html>
<html>
<head>
  <title>禁用定期间隔的示例</title>
</head>
<body>
  <script>
    function waitAndshow() {
      // 定义一个日期和时间变量
      var systemdate = new Date();
      
      // 每隔4秒后显示更新的时间
      document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
    }
    
    // 用于禁用时间间隔的函数
    function stopClock() {
      clearInterval(intervalID);
    }
    
    // 定义时间间隔并调用用户定义的waitAndshow函数
    var intervalID = setInterval(waitAndshow, 3000);
  </script>
  
  <p>当前系统时间：<span id="clock"></span></p>
  <!-- 用于停止定期间隔的按钮 -->
  <button onclick="stopClock();">停止计时器</button>
</body>
</html>

输出

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

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

JavaScript教程-JavaScript计时器

示例

setTimeout()

setInterval()

示例

取消或停止计时器

停用定期间隔

推荐文章

其它