Javascript 多个设置超时同时执行

我最近尝试学习Webdesign，想用JavaScript做一个简单的图像淡出。我知道使用jQuery有一种更简单的方法，在解决这个问题一段时间后，我使用了这种方法，但我无意中发现了它，并想弄清为什么会发生这种情况

要分解这个过程，假设我有一个图像，希望它每0.1秒降低一次不透明度。因此，我使用了for循环，并使用SetTimeout（fade，100）调用了一个fade函数。但是10个循环中的每一个都是同时执行的。我尝试了更简单的方法

setTimeout(fade,100);
setTimeout(fade,100); ....

即使这样，函数的所有10个实例也会同时执行。 那么对于未来的项目：为什么会这样？是否有可能的解决方法

---

非常感谢

您应该使用setInterval

setInterval(fade,100);

setInterval用于重复性任务。它将继续运行。确保完成后清除间隔，以防止内存泄漏

您使用的是for循环，这不是正确的方法

假设当前时刻的时间为：0

您运行了for循环并创建了5个设置超时。创建它需要一些时间，但您不会注意到它

因此，每个setTimeout应该在100毫秒后执行

但它们是在以下位置创建的：

 1. 0.000000001
 2. 0.000000002
 3. 0.000000003
 4. 0.000000004
 5. 0.000000005

他们将在以下时间后调用回调：

 1. 100.000000001
 2. 100.000000002
 3. 100.000000003
 4. 100.000000004
 5. 100.000000005

（仅供演示）

因此，您不会注意到它们，这些（setTimeout和setInterval）不是绝对值。它们会让你花更长的时间

---

希望有帮助D

您应该使用setInterval

setInterval(fade,100);

setInterval用于重复性任务。它将继续运行。确保完成后清除间隔，以防止内存泄漏

您使用的是for循环，这不是正确的方法

假设当前时刻的时间为：0

您运行了for循环并创建了5个设置超时。创建它需要一些时间，但您不会注意到它

因此，每个setTimeout应该在100毫秒后执行

但它们是在以下位置创建的：

 1. 0.000000001
 2. 0.000000002
 3. 0.000000003
 4. 0.000000004
 5. 0.000000005

他们将在以下时间后调用回调：

 1. 100.000000001
 2. 100.000000002
 3. 100.000000003
 4. 100.000000004
 5. 100.000000005

（仅供演示）

因此，您不会注意到它们，这些（setTimeout和setInterval）不是绝对值。它们会让你花更长的时间

---

希望有帮助D

答案是

事件循环。要彻底了解这种行为，您必须了解事件循环的所有阶段，尤其是如何处理
setTimeout
和
setInterval

关于事件循环的MDN文章

Rising stack文章将帮助您清楚地了解事件循环以及微观和宏观任务


简而言之，所有
setTimeout
都在循环的相同
tick
中处理

同样对于您的情况，
setInterval
要好得多
答案是
事件循环
。要彻底了解这种行为，您必须了解事件循环的所有阶段，尤其是如何处理
setTimeout
和
setInterval

关于事件循环的MDN文章

Rising stack文章将帮助您清楚地了解事件循环以及微观和宏观任务


简而言之，所有
setTimeout
都在循环的相同
tick
中处理

另外，对于您的情况，
setInterval
要好得多
有多种方法可以实现。正如其他人所建议的，您可以使用
setInterval
或
setTimeout
递归调用。如果出于某种原因必须对

循环使用

，这也是可能的

基本思想是，只有在第一次执行
fade
函数后，才能调用second
setTimeout
，或者增加连续调用
setTimeout
之间的超时时间


//\//\//\//\//方法1
函数fadeRecur（）{
var d1=document.querySelector（“.d1”）；
如果（d1.style.opacity=''）d1.style.opacity=1；
//console.log（d1.style.opacity）；
如果（d1.style.opacity>0）{
d1.style.opacity-=0.1；
设置超时（fadeRecur，100）；
}
}
设置超时（fadeRecur，100）；
//\//\//\//方法2
var-fsi；
函数fadeCenter（）{
var d2=document.querySelector（“.d2”）；
如果（d2.style.opacity=''）d2.style.opacity=1；
//console.log（d2.style.opacity）；
如果（d2.style.opacity>0）{
d2.style.opacity-=0.1；
}否则{
净间隔（fsi）；
}
}
fsi=设置间隔（fadeInter，100）；
//\//\//\//方法3
函数fadeLoop（）{
var d3=document.querySelector（“.d3”）；
如果（d3.style.opacity=''）d3.style.opacity=1；
//console.log（d3.style.opacity）；
如果（d3.style.opacity>0）{
d3.style.opacity-=0.1；
}
}
对于（var i=1；i有多种方法可以实现它。正如其他人所建议的那样，您可以使用
setInterval
或使用
setTimeout
递归调用。如果出于某种原因必须使用
for
循环，这也是可能的

基本思想是，只有在第一次执行
fade
函数后，才能调用second
setTimeout
，或者增加连续调用
setTimeout
之间的超时时间


//\//\//\//\//方法1
函数fadeRecur（）{
var d1=document.querySelector（“.d1”）；
如果（d1.style.opacity=''）d1.style.opacity=1；
//console.log（d1.style.opacity）；
如果（d1.style.opacity>0）{
d1.style.opacity-=0.1；
设置超时（fadeRecur，100）；
}
}
设置超时（fadeRecur，100）；
//\//\//\//方法2
var-fsi；
函数fadeCenter（）{
var d2=document.querySelector（“.d2”）；
如果（d2.style.opacity=''）d2.style.opacity=1；
//console.log（d2.style.opacity）；
如果（d2.style.opacity>0）{
d2.style.opacity-=0.1；
}否则{
净间隔（fsi）；
}
}
fsi=设置间隔（fadeInter，100）；
//\//\//\//方法3
函数fadeLoop（）{
var d3=document.querySelector（“.d3”）；
如果（d3.style.opacity=''）d3.style.opacity=1；
//console.log（d3.style.opacity）；
如果（d3.style.opacity>0）{
d3.style.opacity-=0.1；
}
}
对于（var i=1