当前位置:首页 > 编程技术 > 正文内容

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

yc8881年前 (2023-01-06)编程技术243

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

在 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 时杀死计时器一样。


本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10555.html

标签: JavaScript
分享给朋友:

“解释 JavaScript 中计时器的工作原理” 的相关文章

【说站】Thymeleaf报错Error resolving template “XXX”

【说站】Thymeleaf报错Error resolving template “XXX”

修改了一下开源项目的目录结构访问突然报错Error resolving template “XXX”可能原因有如下三种:第一种可能:原因:在使用springboot的过程中,如果使用thymeleaf...

【说站】用一句话就可以去除宝塔面板操作上的二次验证

【说站】用一句话就可以去除宝塔面板操作上的二次验证

用过宝塔的朋友应该都会发现,现在宝塔面板有些鸡肋的功能,删除文件、删除数据库、删除站点等操作都需要做计算题!不仅加了几秒的延时等待,还无法跳过!这时候就会有朋友在想,如何去除宝塔面板的二次验证,此篇文...

【说站】利用Webhook实现Java项目自动化部署

【说站】利用Webhook实现Java项目自动化部署

用webhook就能实现Java项目自动部署,其实原理很简单。费话不多说,直接往下看教程。1. 创建gitee仓库并初始化2. 在linux安装git3. 在宝塔的软件的商店里下载Webhook4....

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

今天在安装MySQL时出现starting the server失败,经过查询分析得出以下结论,记录一下操作步骤。原因分析:如果电脑是第一次安装MySQL,一般不会出现这样的报错。如下图所示。star...

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...

【说站】使用systemctl配置dnspod-shell实现ddns

【说站】使用systemctl配置dnspod-shell实现ddns

这个是毛子路由器上用的脚本,由于碳云的nat服务器公网IP不断的变,因此只好通过ddns来稳定连接nat服务器了。顺便水一篇文章,大家新年快乐。使用前需要将域名添加到 DNSPod 中,并添加一条A记...