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中使用Timeout函数来实现这一点，但我不知道如何让它适用于不同的代码块，而不是让它适用于不同的函数。我不一定想要直接给我代码的答案，我只想知道如何实现这一点，以便我自己编写代码。任何连贯的解释都可以。我的一个朋友建议使用IF条件使一个具有奇数索引的星出现2秒，并且一个具有偶数索引的星以相同的时间再次出现（或者如果我愿意，可以使用不同的时间）。但我仍然不确定如何为各个代码块实现Timeout函数，以及它在这种情况下如何工作。

Answer 1

首先，如果你想为每个*显示一个间隔，你需要在每个循环中放置超时功能

即

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

像这样你需要去，如果你把for循环放在超时函数中它不会按照需要工作现在尝试相应地改变代码记住这一点

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

1 个答案: