如何在jQuery中的固定时间间隔后重复调用函数
答案:使用 JavaScript setInterval() 方法
您可以使用 JavaScript setInterval() 方法在一定时间后重复执行函数。 setInterval() 方法需要两个参数，第一个通常是函数或表达式，另一个是以毫秒为单位的时间延迟。
在下面的示例中，showTime() 函数每 1000 毫秒（即 1 秒）重复调用一次，直到您告诉它停止。 让我们尝试一下，看看它是如何工作的:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript setInterval() 方法</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var myVar;
function showTime(){
var d = new Date();
var t = d.toLocaleTimeString();
$("#demo").html(t); /* 在页面上显示时间 */
}
function stopFunction(){
clearInterval(myVar); /* 停止计时器 */
}
$(document).ready(function(){
myVar = setInterval("showTime()", 1000);
});
</script>
</head>
<body>
<p id="demo"></p>
<button onclick="stopFunction()">Stop Timer</button>
</body>
</html>但是，如果您正在做一些耗时的事情，更好的方法是使用 setTimeout() 函数。 因为，与 setInterval() 和 setTimeout() 函数不同，您可以等到函数完全执行后再调用它。 这是一个例子:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript setTimeout() 方法</title>
<style>
img{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var myVar;
function showImage(){
$("img").fadeIn(750).fadeOut(750);
myVar = setTimeout(showImage, 2000);
}
function stopFunction(){
clearTimeout(myVar); /* 停止计时器 */
}
$(document).ready(function(){
showImage();
});
</script>
</head>
<body>
<button onclick="stopFunction()">Stop Image Transition</button>
<p>
<img src="images/sky.jpg" alt="Cloudy Sky">
</p>
</body>
</html>在上面的例子中，showImage() 函数在图像淡入淡出过渡完全完成后每次 2000 毫秒（即 2 秒）后被调用。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
