解释 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 时杀死计时器一样。
更新于：6天前相关文章
- 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设计模式中的五大设计原则
- 开源JavaScript HTML5画布库Fabric.js官网
- volta - 开源的 JavaScript 工具管理器官网
- VPN的工作原理
- CountUp.js 轻量级的数值动画JavaScript插件库
- 深入浅出JavaScript跨域解决方案
- Javascript实现下雪的特效
- javascript中的function与class用法