解释JavaScript中定时器的工作

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

简单地说，我们可以使用计时器，在一些延迟后执行代码。例如，当你访问一些网站时，它在你访问的3到4分钟后会显示注册框，这一点我们可以用JavaScript实现。我们可以设置延迟定时器来显示注册弹出框。

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

因此，有两个不同的函数可以在JavaScript中设置定时器，我们将在本教程中探讨。

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

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

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

语法

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

let timeoutId = setTimeout(callback, delay);

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

参数

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 – 这是一个函数，每隔一段时间就会调用setting()函数。
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()函数来停止seterval()函数。

语法

// 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，因为我们在count大于3的时候杀死了定时器。