在 JavaScript 中,计时器是一个非常值得注意的功能。与普通的手表定时器一样,我们可以在某个时间启动定时器,并在特定时间后执行 JavaScript 中的函数或代码。
简单来说,我们可以使用定时器在延迟一段时间后执行代码。例如,当您访问某个网站时,访问3到4分钟后就会显示注册框,我们可以使用JavaScript来实现。我们可以设置延迟计时器来显示注册弹出框。
现实生活中计时器的另一个很好的例子是应用程序内的广告。当您打开任何应用程序时,它会在 2 至 3 分钟后开始展示广告,并以 1 至 2 分钟的间隔更改广告。
因此,JavaScript 中有两种不同的函数可以设置计时器,我们将在本教程中对其进行探讨。
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>
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()函数来停止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中文网其它相关文章!
已抢66110个
抢已抢34135个
抢已抢18944个
抢