javascript - 为不同的代码块设置超时(对于模式)

Question

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

function myFunction() {
  $('#Asterisk').empty();
  $('#Getafix').empty();
  $('#upsidedown').empty();
  $('#downsideup').empty();
  for (var i = 0; i < 7; i++) {

    for (var a = i; a < 7; a++) {

      $('#Asterisk').append("*");

    }


    $('#Asterisk').append("<br>");

    for (var a = i; a > -1; a--) {

      $('#Getafix').append("*");

    }
    $('#Getafix').append("<br>");


    for (var a = i; a > -1; a--) {

      $('#upsidedown').append("*");

    }
    $('#upsidedown').append("<br>");



    for (var a = i; a < 7; a++) {

      $('#downsideup').append("*");

    }
    $('#downsideup').append("<br>");
  }



}
myFunction();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Asterisk"></div>
<div id="Getafix"></div>
<div id="upsidedown"></div>
<div id="downsideup"></div>

现在我需要能够使这些单独片段中的所有单个星星在特定时间出现。即，附加到“星号”div 的图案中的第一个星星在按下按钮后 2 秒出现，然后第二个星星在另外 2 秒后出现，依此类推。我知道我可以使用 Javascript 中的超时函数来实现此目的，但我不确定如何使其适用于不同的代码块，而不是使其适用于不同的函数。我不一定想要立即给我代码的答案，我只是想要一个关于如何实现这一目标的想法，以便我可以自己编写代码。任何连贯的解释都可以。我的一位 friend 建议使用 IF 条件使奇数索引的星星出现 2 秒，而偶数索引的星星以相同的时间再次出现(或者不同的时间，如果我愿意的话)。但我仍然不确定如何为各个代码块实现超时功能，以及它在这种情况下如何工作。

Answer 1

首先，如果您想为每个 * 显示一个时间间隔，则需要将超时函数放入每个循环内

即

  for(var a=i;a<7;a++) {  
   setTimeout(function(){ $('#Asterisk').append("*");
         },Your_time_in_milliseconds)
        }

像这样，如果将 for 循环放在超时函数中，它就不会按预期工作，现在请尝试相应地更改代码，记住这一点