Loop through js array continually with pauses

Question

I want to loop over an array continuously on click. Extra props if you can work in a delay between class switches :-)

I got this far:

// Define word
var text = "textthing";

// Define canvas
var canvas = 'section';

// Split word into parts
text.split();

// Loop over text
$(canvas).click(function() {

    $.each(text, function(key, val) {
        $(canvas).removeAttr('class').addClass(val);
    });

});

Which is not too far at all :-)

Any tips?

Er.. what again? Your question still doesn't say why you want to do this.. — Robin Maben, Aug 23 '12 at 05:37
This logic is flawed: `var text = 'lorem'; text.split(); console.log(text) // lorem`. Do this instead: `var text = 'lorem'.split(''); console.log(text) // [l, o, r, e, m]` — elclanrs, Aug 23 '12 at 06:09
@elclanrs. Yes, that's more succinct but I wish to populate that text var via a input element later down the line, and this makes it clearer. — Niels, Aug 24 '12 at 03:35
What I mean is that `text.split()` won't update the variable unless you assign it again. ie. `text = text.split()` — elclanrs, Aug 24 '12 at 03:55

Lee · Accepted Answer · 2012-08-23T05:58:41.337

The following will wait until you click the selected element(s) in the var el. In this example var el = $('section') will select all <section>...</section> elements in your document.

Then it will start cycling through the values in cssClassNames, using each, in turn as the css class name on the selected element(s). A delay of delayInMillis will be used between each class change.

var cssClassNames = ['c1', 'c2', 'c3'];
var el = $('section');
var delayInMillis = 1000;

// Loop over text
el.click(function() {
  var i = 0;
  function f() {
    if( i >= cssClassNames.length ) {
      i = 0;
    }
    var currentClass = cssClassNames[i];
    i += 1;

    el.removeClass().addClass(currentClass);
    setTimeout(f, delayInMillis);
  }
  f();
});

Jake · Answer 2 · 2012-08-23T05:47:39.133

I believe you want a delay of X milliseconds between removing a class and adding a class. I'm not sure that you have to have the lines marked // ? or even that they do the job, but what you do have to have is a way to get the value's into the function. Also, the setTimeout anon function might not actually need the parameters, but it should give you an idea.

$(canvas).click(function() {

    $.each(text, function(key, val) {
        $(canvas).removeAttr('class')
        var $canvas = $(canvas) //?
        var class_val = val  //?
        setTimeout(function ($canvas, class_val) {
            $canvas.addClass(class_val);
        }, 2000);

   });

});

Edit: I'd do this instead function modify_element($element, class_name){ $element.removeClass('class'); setTimeout(function ($element) { $element.addClass(class_name); }, 1000); //adds the class 1 second after removing it }

$(canvas).click(function() {

    $.each(text, function(key, val) {
        setTimeout(modify_element($(canvas), val),2000);
        //this will loop over the elements with 2 seconds between elements
    });

});

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

"loop over an array continuously" this sounds like a infinite loop, I don't think you want that. About pausing the loop, this is possible, you can use this

edited May 23 '17 at 10:24

Community

1
1

answered Aug 23 '12 at 05:47

cuzzea

1,515
11
22

Loop through js array continually with pauses

3 Answers3