How to re-loop a setInterval/setTimeout function

Question

I am trying to re-loop the display of user-inputted string. I am doing this using either setInterval or setTimeout (not sure which one)

So if a user submits 2 entries into a text-box form, those 2 entries will be displayed, one after another, repeatedly.

What follows is my code, taken from: jsfiddle.net/sean1rose/sKadX/4/

frm.submit(function(event) {
    event.preventDefault();
    container.push(txtBox.val());

    var i = 0;

    function myLoop(){
        setInterval(function () {
            output.text(container[i]);
            i++;
            if (i < container.length) {
                myLoop();
            }
        }, 3000)
    }

    myLoop();

    txtBox.val('');
});

As my code is now, if you input 2 different strings into the form, one after another, it will display one after the other (w/ a delay), but then it will stop at the last one (it won't re-loop).

How would I fix the code to get it to continuously re-loop the input so that it doesn't stop at the last inputted string, but instead restart at and display the 1st inputted string? (This should hopefully also work for more than 2 inputs. For example, if a user inputs 5 different entries, then it will loop thru and display those 5 over and over again)...

tewathia · Accepted Answer · 2013-12-29 06:54:18Z

1

I've modified your fiddle a bit. Now the frm.submit event looks like:

frm.submit(function (event) {
    event.preventDefault();
    container.push(txtBox.val());
    var i = 0; // to initialize the index
    clearInterval(oldHandle); //to make sure only one setInterval is running at any time
    oldHandle = setInterval(function () {
        output.text(container[i]);
        i++;
        if (i == container.length) { //this re-loops your container array once the last element is reached 
            i = 0; //reset the index
        }
    }, 500)

    txtBox.val('');
});

DEMO

Edit: For your follow-up question, I've spliced the container array with the index of the p tag clicked(using jQuery's prevAll)

$(".controlbox").on('dblclick', 'p', function () {
        container.splice($(this).prevAll('p').length, 1);
        $(this).remove();
});

I've also modified the frm.submit event, now it looks like:

oldHandle = setInterval(function () {
    output.text(container[i++%container.length]);
}, 500)

DEMO

edited Dec 29, 2013 at 6:54

answered Dec 28, 2013 at 7:51

tewathia

7,3383 gold badges26 silver badges28 bronze badges

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

3 Comments

Seeeyonnn Over a year ago

Thank you. This worked perfectly. Follow up question: I've added an event handler that allows for the removal of entries from my control panel by double clicking on the entry (this happens after entries have been inputted to the array). However, this doesn't remove the entry from the container-Array. Any advice as to how to bind/link the event handler so that removal of an entry from the control panel ALSO RESULTS IN THE REMOVAL OF THAT ENTRY FROM THE ARRAY? jsfiddle.net/sean1rose/sKadX/9

tewathia Over a year ago

@Seeeyonnn You can use splice to remove the value selected, using its index. See this (do consider using a select/multiSelect though, instead of this .container>p structure)

tewathia Over a year ago

@Seeeyonnn Update: multiselect reference. See the select[multiple] in action in the second fiddle I've posted in my answer.

WebServer · Accepted Answer · 2013-12-28 08:39:21Z

0

frm.submit(function(event) {
  event.preventDefault();
  container.push(txtBox.val());
  console.log(container);
  function myLoop(){
    setInterval(function () {
        var str="";
        for(var i=0;i<container.length;i++){
           str+=container[i]+"<br>";

        }
        output.html(str)
        myLoop();
    }, 3000)
}

myLoop();

txtBox.val('');
});

fiddle:http://jsfiddle.net/tCw8Q/

edited Dec 28, 2013 at 8:39

answered Dec 28, 2013 at 7:01

WebServer

1,41610 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to re-loop a setInterval/setTimeout function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related