雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

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

2024-09-12 26

在 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)

参数

回调 – 它是一个在每个间隔后调用 setInterval() 函数的函数。

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

返回值

setInterval() 函数还返回唯一 id,如 setTimeout() 函数,我们可以用来停止计时器。

在这个例子中,我们使用 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 时杀死计时器一样。

更新于:1个月前
赞一波!

文章评论

评论问答