解释 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 时杀死计时器一样。
更新于:1个月前相关文章
- 全栈工程师看过来!PHP Javascript语法对照、速查
- Javascript事件与功能说明大全
- Javascript脚本运算符执行顺序对照表
- 如何使用JavaScript从字符串中删除HTML标签?
- 如何在 JavaScript 中使用正则表达式删除 HTML 标签?
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- 使用VSCode开发.NET MVC常用插件
- JS判断是否在微信浏览器打开
- JavaScript设计模式学习网站Patterns
- JavaScript 常用自定义功能函数
- PHP,JavaScript 获取当前域名、判断网址协议是否为 HTTPS
- javascript || 逻辑或 非布尔值用法
- javascript使用正则RegExp匹配到的值replace替换
- Three.js - 开源的 JavaScript 3D 图形库
- 下载文本文件javascript
- Javascript实现飘雪效果
- 开发环境管理工具Conda,支持语言:Python, R, Scala, Java, Javascript, C/ C++, FORTRAN
- 计时器对象——Python 多线程
- 2024年前端JavaScript面试题
- JavaScript设计模式中的五大设计原则