浅析javascript的间隔调用和延时调用
在JavaScript中，有两种常见的调用方式：间隔调用和延时调用。
延时调用
延时调用意思是在一段时间之后才执行函数，在JavaScript中使用setTimeout()方法来实现。
setTimeout()方法需要接收两个参数，第一个参数是要执行的函数，第二个参数是时间（单位为毫秒）。在例子中，代码会在3秒之后执行foo()函数。
function foo() {
console.log('This function is executed after 3 seconds');
}
setTimeout(foo, 3000);
间隔调用
间隔调用意味着每隔一段时间就执行一次函数，在JavaScript中使用setInterval()方法来实现。
setInterval()方法也需要接收两个参数，第一个参数是要执行的函数，第二个参数是时间（单位为毫秒）。在例子中，代码会每隔1秒执行一次foo()函数。
function foo() {
console.log('This function is executed after every 1 second');
}
setInterval(foo, 1000);
示例说明
示例1
下面是一个稍微复杂的例子，我们每隔1秒更新页面上的时间。
<!DOCTYPE html>
<html>
<body>
<h1 id="time"></h1>
<script>
function updateTime() {
let date = new Date();
let hours = date.getHours().toString().padStart(2, '0');
let minutes = date.getMinutes().toString().padStart(2, '0');
let seconds = date.getSeconds().toString().padStart(2, '0');
document.getElementById("time").innerHTML = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
在这个例子中，我们定义了一个updateTime()函数，它的作用是获取当前的时间并将其显示在页面上。然后我们使用setInterval()方法来调用updateTime()函数，并传递1000ms作为第二个参数，这样每隔1秒就会调用一次updateTime()函数，更新页面上的时间。
示例2
现在我们来看一个实现倒计时的例子。在这个例子中，我们需要在3秒内倒计时，并在倒计时结束后显示“时间到了！”的消息。
<!DOCTYPE html>
<html>
<body>
<h1 id="countdown"></h1>
<script>
let timeLeft = 3;
let countdownTimer = setInterval(function () {
timeLeft--;
document.getElementById('countdown').innerHTML = `倒计时剩余时间：${timeLeft}秒`;
if (timeLeft == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = '时间到了！';
}
}, 1000);
</script>
</body>
</html>
在这个例子中，我们使用了setInterval()方法来创建一个间隔调用，每隔1秒执行一次函数。这个函数首先将timeLeft减1，然后将剩余时间显示在页面上，如果时间减到了0，就清除间隔调用，并将“时间到了！”的消息显示在页面上。
以上就是JavaScript的间隔调用和延时调用的完整攻略，希望对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅析javascript的间隔调用和延时调用 - Python技术站
微信扫一扫 
支付宝扫一扫 