javascript - setInterval 中的 jQuery 停止函数

Question

如何在每个Interval之后停止执行firstShow。我希望它从0开始。

var firstShow = function(){

             $("#i_can").delay(2000).fadeIn(300);

            $( "#me" ).delay( 4000).fadeIn( 300 );

            $( "#horizons" ).delay( 6000 ).fadeIn(300);

              .....      

        }

    firstShow()   
    var NewTextAgain = setInterval(firstShow,10000)

Answer 1

您可以使用回调函数执行类似的操作，只有在完成所有效果后才会再次触发该函数

$(document).ready(function() {
  $("#i_can").hide();
  $("#me").hide();
  $("#horizons").hide();
  $("#team").hide();
  $("#grow").hide();
  $("#course").hide();
  $("#celebrate").hide();

  var i;
  var test = function() {
    i++;
    if (i == 14) firstShow();
  }

  var firstShow = function() {
    i = 0;
    $("#i_can").delay(2000).fadeIn(300, test);
    $("#me").delay(4000).fadeIn(300, test);
    $("#horizons").delay(6000).fadeIn(300, test);
    $("#me").delay(4000).fadeOut(test);
    $("#horizons").delay(2000).fadeOut(test);
    $("#team").delay(10000).fadeIn(300, test);
    $("#course").delay(12000).fadeIn(300, test);
    $("#team").delay(4000).fadeOut(test);
    $("#course").delay(2000).fadeOut(test);
    $("#grow").delay(16000).fadeIn(300, test);
    $("#celebrate").delay(18000).fadeIn(test);
    $("#grow").delay(5200).fadeOut(test);
    $("#celebrate").delay(3100).fadeOut(test);
    $("#i_can").delay(19200).fadeOut(test);
  }
  firstShow();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="i_can" class="i_can">I can</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="me">Challenge Myself</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="horizons"> To Chart New Horizons</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="team"> Challenge My Team</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="course"> To Set New Courses</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="grow">Grow With You</h2>
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="celebrate">To Celebrate Success</h2>