解释 JavaScript 中定时器的工作原理

WBOY 转载: 2023-08-25 10:05:02 509浏览

在 JavaScript 中，计时器是一个非常值得注意的功能。与普通的手表定时器一样，我们可以在某个时间启动定时器，并在特定时间后执行 JavaScript 中的函数或代码。

简单来说，我们可以使用定时器在延迟一段时间后执行代码。例如，当您访问某个网站时，访问3到4分钟后就会显示注册框，我们可以使用JavaScript来实现。我们可以设置延迟计时器来显示注册弹出框。

现实生活中计时器的另一个很好的例子是应用程序内的广告。当您打开任何应用程序时，它会在 2 至 3 分钟后开始展示广告，并以 1 至 2 分钟的间隔更改广告。

因此，JavaScript 中有两种不同的函数可以设置计时器，我们将在本教程中对其进行探讨。

使用 setTimeOut() 函数在特定时间后执行代码

setTimeOut() 函数允许我们在特定延迟后执行代码。然而，它允许我们定义延迟。它仅在特定延迟后执行一次代码。

当setTimeOut()函数执行时，它会启动计时器，并在特定的延迟后执行回调函数。

语法

用户可以按照以下语法使用setTimeOut()函数。

let timeoutId = setTimeout(callback, delay);

在上面的语法中，回调函数也可以是一个箭头函数来执行。

参数

回调 – 这是一个在延迟时间后执行的函数。
延迟 – 延迟是指在该时间之后执行回调函数的时间（以毫秒为单位）。

返回值

setTimeOut() 函数返回唯一的 id，我们可以用它来终止计时器。

示例

在下面的示例中，当用户单击“启动计时器”按钮时，它将调用 callTimer() 函数。用户可以看到它打印了“先执行的callTimer函数”，而在2000毫秒后，由于setTimeOut()函数在2000毫秒后调用了回调函数，所以它打印了“此函数在一段延迟后执行”。

<html>
   <body>
      <h2> Using the setTimeOut() function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "callTimer()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         output.innerHTML += "Program execution started </br>";
         function callTimer() {
            output.innerHTML = "The callTimer function executed  <br/>";
            setTimeout(callback, 2000);
         }
         function callback() {
            output.innerHTML += "This function executed after some delay.";
         }
      </script>
   </body>
</html>

使用setInterval()函数在每个时间间隔后执行该函数

setTimeOut() 函数仅执行回调函数一次，但 setInterval() 函数在我们作为第二个参数传递的每个时间间隔后执行代码setInterval()。

语法

用户可以按照以下语法使用setInterval()函数。

setInterval(callback, interval)

参数

Callback – 这是 setInterval() 函数在每个时间间隔后调用的函数。
Interval – 每个时间间隔后调用回调函数的时间（以毫秒为单位）。

返回值

setInterval()函数也像setTimeout()函数一样返回唯一的id，我们可以用它来停止计时器。

示例

在此示例中，我们使用 setInterval() 函数每 1000 毫秒调用一次回调函数。用户可以观察到，当按下启动计时器按钮时，startInterval() 函数将执行，并调用 setInterval() 函数。 setInterval() 函数每秒调用一次回调函数。

<html>
   <body>
      <h2> Using the <i> setInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         output.innerHTML += "Program execution started </br>";
         
         // when user clicks on the button, startInterval() function will be called
         function startInterval() {
            output.innerHTML = "The callTimer function executed <br/>";
            
            // the setInterval() function will call the callback function after every second.
            setInterval(callback, 1000);
         }
         function callback() {
            output.innerHTML += "This function executed for " + count + " time </br>";
            
            // update the count to track of howmany times a callback is called.
            count = count + 1;
         }
      </script>
   </body>
</html>

使用clearTimeOut()和clearInterval()函数来终止定时器

启动计时器后，我们还需要停止它。我们可以使用clearTimeOut()函数来停止setTimeOut()函数，使用clearInterval()函数来停止setInterval()函数。

语法

// To stop the setTimeOut() function
clearTimeout(TimerId);

// To stop the setInterval() function
clearInterval(TimerId);

参数

TimerId – 它是由 setTimeOut() 或 setInterval() 函数返回的唯一 ID。

示例

在下面的示例中，我们使用 setInterval() 计时器函数每秒调用该函数。此外，我们还跟踪 setInterval() 函数调用回调函数的次数。

在回调函数中，我们使用 if 语句检查计数是否大于 3，并使用clearInterval() 函数终止计时器。

<html>
   <body>
      <h2> Using the <i> clearInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         let TimerId = "";
         function startInterval() {
            TimerId = setInterval(() => {
               output.innerHTML += "count = " + count + "<br/>";
               count += 1;
               if (count > 3) {
                  clearInterval(TimerId);
               }
            }, 1000);
         }
      </script>
   </body>
</html>

在上面的输出中，用户可以观察到它一直打印到 count = 3，因为当计数大于 3 时我们就终止了计时器。

以上就是解释 JavaScript 中定时器的工作原理的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何使用JavaScript在HTML页面中水平添加元素？下一条：如何使用 FabricJS 通过角点非均匀地调整对象大小？