数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学解释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()函数也像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);
参数
计时器ID – 由setTimeout()或setInterval()函数返回的唯一ID。
示例
在下面的示例中，我们使用setInterval()计时器函数每秒调用一次函数。此外，我们还跟踪setInterval()函数调用回调函数的次数。
在回调函数中，我们使用if语句检查计数是否大于3，如果大于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>
在上面的输出中，用户可以观察到它打印到计数=3，因为当计数大于3时，我们已经终止了计时器。
605 次浏览
