Javascript 为不同的代码块设置超时（对于模式）

我已经用Javascript编写了一些代码，可以在按下按钮时绘制星形图案。按下按钮时，图案的4个不同段将附加到4个不同的div。它们都属于相同的功能代码：

函数myFunction（）{
$（'#星号'）.empty（）；
$（'#Getafix'）.empty（）；
$（'#upsidedown'）.empty（）；
$（“#向下向上”）.empty（）；
对于（变量i=0；i<7；i++）{
对于（var a=i；a<7；a++）{
$（'#星号'）。附加（“*”）；
}
$（“#星号”）。追加（
”；
对于（变量a=i；a>-1；a--）{
$（'#Getafix'）。追加（“*”）；
}
$（“#Getafix”）。追加（
”；
对于（变量a=i；a>-1；a--）{
$（'#upsidedown'）。追加（“*”）；
}
$（'#upsidedown'）。追加（
）；
对于（var a=i；a<7；a++）{
$（“#下行上行”）。追加（“*”）；
}
$（“#下行上行”）。追加（
”；
}
}
myFunction（）
首先，如果要为每个*设置一个显示间隔，则需要在每个循环中设置超时功能

即

for（var a=i；a对于开始，如果要为每个*设置一个显示间隔，则需要在每个循环中设置超时函数

即

用于（var a=i；aTo首先，我建议尝试将循环逻辑提取到您调用的函数中。任何时候，当您有一个代码块重复多次，并且有有限数量的差异时，这是创建一个传递这些差异的函数的基本情况。然后，您可以开始研究如何将超时应用到t逻辑如您所愿。@Taplar感谢您提供的大纲：）我更感兴趣的是学习“它是如何工作的”，而不是让它工作，所以这非常有帮助。首先，我建议尝试将循环逻辑提取到您调用的函数中。任何时候，如果有一个代码块重复多次，并且有有限的差异，这都是创建一个您需要将这些差异归纳到一起。然后，您可以开始研究如何根据需要对该逻辑应用超时。@Taplar感谢您提供了一个提纲：）我更感兴趣的是学习“它是如何工作的”，而不是让它工作，所以这非常有帮助。您可能想在答案中说明setTimeout方法在执行之前如何处理“a”的更改。@Rahul S R。谢谢你，伙计，我想我现在对它有点了解了。在更改代码时请记住这一点。我会让你知道的知道它是如何运行的。您可能想在答案中说明setTimeout方法在执行之前如何处理“a”更改。@Rahul S R。谢谢，伙计，我想我现在理解得更好了。在更改代码时会记住这一点。我会让您知道它是如何运行的。
  for(var a=i;a<7;a++) {  
   setTimeout(function(){ $('#Asterisk').append("*");
         },Your_time_in_milliseconds)
        }