Javascript - Trying to delay iterating through for loop

Question

I've tried finding my answers in other posts and can find bits and pieces, but not a complete answer. So, sorry if this is a duplicate question - best I can tell, it's not.

I'm trying to accomplish three things:

Delay iterating through a for loop for one second between itmes
Revert the previous item to its original state before moving on to the next item
Start the loop all over again after the last item

I've accomplished the first, but can't figure how to accomplish the next two.

Here's a watered-down code sample:

HTML:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>
<p>Sixth paragraph.</p>
<p>Seventh paragraph.</p>
<p>Eighth paragraph.</p>
<p>Nineth paragraph.</p>
<p>Tenth paragraph.</p>

CSS:

p.red {color: red;}

JS:

function addRed() {
    var spans = $('p'),
        count = spans.length,
        delay = 1000;
    for(var i = 0; i <= count; i++) {
        (timer(i, spans, delay));
    } 
}

function timer(a, b, c) {
  setTimeout(function() {
    $(b[a]).toggleClass('red');
  }, c * a);
} (0);

addRed();

I'd like for the first <p> in this example to turn red, wait for one second, then turn the second <p> red and revert the first back to its original state. Then, once the cycle has completed (iterated through the entire list of <p>s), start again at the top. I.e.; a repeating loop.

Sorry if this is asking three separate questions. It's easier and makes more sense to just group them all together.

Here's my fiddle.

As a final note, I'm not tied to any of this code. If needed, I'm open to changing it.

AmmarCSE · Accepted Answer · 2015-07-03 03:33:30Z

2

For point #2, simply remove the class red from all p elements and then add to the current
For point #3, use index() to check if this is the last timeout and start over again after one second

function addRed() {
  var spans = $('p'),
    count = spans.length,
    delay = 1000;
  for (var i = 0; i <= count; i++) {
    (timer(i, spans, delay));
  }
}

function timer(a, b, c) {
  setTimeout(function() {

    $('p').removeClass('red');
    $(b[a]).addClass('red');

    var currentIndex = $(b[a]).index();
    if (currentIndex == $('p').length) {
      setTimeout(function() {
        addRed();
      }, 1000);
    }
  }, c * a);
}(0);

addRed();

p.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>

answered Jul 3, 2015 at 3:33

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

2 revs user1106925 · Accepted Answer · 2015-07-03 04:21:54Z

1

This can be done in a much more concise manner.

(function addRed(elems, i, delay) {
    elems.eq(i).addClass("red");
    setTimeout(function() {
        elems.eq(i).removeClass("red");
        addRed(elems, ++i % elems.length, delay);
    }, delay);
})($("p"), 0, 1000);

p.red {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>

edited Jul 3, 2015 at 4:21

community wiki

2 revs
user1106925

Comments

Arun P Johny · Accepted Answer · 2015-07-03 03:34:34Z

0

You can use an interval instead of timeout like

var interval;

function addRed() {

  var $ps = $('p'),
    i = -1,
    count = $ps.length;;

  interval = setInterval(function() {
    $ps.eq(i).removeClass('red');
    i = ++i < count ? i : 0;
    $ps.eq(i).addClass('red');
  }, 500)
}


addRed();

p.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>
<p>Sixth paragraph.</p>
<p>Seventh paragraph.</p>
<p>Eighth paragraph.</p>
<p>Nineth paragraph.</p>
<p>Tenth paragraph.</p>

answered Jul 3, 2015 at 3:34

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

sfletche · Accepted Answer · 2015-07-03 03:50:24Z

0

You were close.

I added 2 conditionals. One to your setTimeout function to satisfy condition 2, and one to your for loop to satisfy condition 3.

Here is the updated code

function addRed() {
  var spans = $('p'),
    count = spans.length,
    delay = 1000;
  for(var i = 0; i <= count; i++) {
    (timer(i, spans, delay));
    if (i === count) {
      i = 0; 
    }
  } 
}

function timer(a, b, c) {
  setTimeout(function() {
    if (a > 0) {
      $(b[a-1]).toggleClass('red');
    }
    $(b[a]).toggleClass('red');
  }, c * a);
} (0);

addRed();

edited Jul 3, 2015 at 3:50

answered Jul 3, 2015 at 3:35

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Collectives™ on Stack Overflow

Javascript - Trying to delay iterating through for loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related