解释 JavaScript 中定时器的工作原理
- WBOY转载
- 2023-08-25 10:05:02900浏览
在 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)
参数
Callback – 这是 setInterval() 函数在每个时间间隔后调用的函数。
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()函数来停止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 时我们就终止了计时器。
以上是解释 JavaScript 中定时器的工作原理的详细内容。更多信息请关注PHP中文网其他相关文章！