setTimeout() 和 setInterval() 之间的区别 [重复]答案

【问题标题】：difference between setTimeout() and setInterval() [duplicate]setTimeout() 和 setInterval() 之间的区别 [重复]
【发布时间】：2023-03-14 18:17:02
【问题描述】：

我试图根据我向下滚动页面的程度沿 y 方向的大 div 移动一个小 div。但我发现使用 setTimeout() 和 setInterval() 会产生两个完全不同的结果。实际上setInterval()被浏览器挂了好几次。这两个函数的基本区别是什么？？

<!DOCTYPE html>
<head>
<title>creat a dynamic div</title>
<style>
#mydiv{
border:2px solid green;
}
</style>
</head>
<body>
<script>
var i=0;
var elem1=document.createElement("div");
var atts1=document.createAttribute("style");

atts1.value="width:200px;height:3200px;border:1px solid black;background-color:orange;";
elem1.setAttributeNode(atts1);
document.body.appendChild(elem1);

var elem2=document.createElement("div");
var atts2=document.createAttribute("style");
var atts22=document.createAttribute("id");
atts22.value="mydiv";
atts2.value="width:200px;height:300px;background-color:red;position:absolute;top:0px;left:300px;";
elem2.setAttributeNode(atts2);
elem2.setAttributeNode(atts22);
document.body.appendChild(elem2);

function moveIt(){
var a=window.pageYOffset;


if(i > (a+30)){

clearTimeout(p);

}else{
elem2.style.top=i+"px";
i=i+1;
}
var p=setTimeout(moveIt,200);
}

window.onscroll=moveIt;

</script>
</body>
<html>

【问题讨论】：

当然，它们给出完全不同的结果。它们是完全不同的功能。快速查看文档、快速搜索或快速测试将清楚区别。

标签： javascript

【解决方案1】：

setTimeout 在超时时执行一次函数。 setInterval 重复执行函数on和interval

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

【讨论】：

我在函数内部写了 setTimeout/setInterval，所以它应该在函数结束时继续执行 setTimeout/setInterval 应该一次又一次地调用，不是吗？
当您致电var p=setTimeout(moveIt,200); 时，您正在将计时器分配给新的 p。所以你打电话给clearTimeout(p); 是无关紧要的。
你所拥有的对我有用。我认为对于您正在尝试做的事情，您已经正确地使用了 setTimeout。如果您想调用 setInterval，您需要将 var p 移出函数，并确保在调用另一个 setInterval 之前调用 clearTimeout(p)。如果你为 setInterval 覆盖 p 的引用，它将永远执行。

【解决方案2】：

setTimeout 只会执行一次函数，而setInterval 将每隔n 秒执行一次函数（无论您指定什么）。

【讨论】：