Modifying JS to stop animation - HTML/CSS/JS

Issue

I have the following code:

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display : none;
  margin  : 0;
  padding : 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1> Hello </h1>
<div class="quotes">
  <h1> There </h1>
</div>
<div class="quotes">
  <h1> World </h1>
</div>

How can I modify the JS so that once the text alternates once, it stops. I basically want to stop it from continuously alternating and want it to stop when the text basically reaches World since the first cycle of alternating text will be completed. How can I modify the JS for this?

Solution

Put a limit condition to go to the next iteration. In this case, is not a loop, so quoteIndex % quotes.length is not needed.

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    var q=quotes.eq(quoteIndex)
      .fadeIn(2000)
    if (quoteIndex < quotes.length-1)
      q.delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display : none;
  margin  : 0;
  padding : 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1> Hello </h1>
<div class="quotes">
  <h1> There </h1>
</div>
<div class="quotes">
  <h1> World </h1>
</div>

Answered By - F.Igor