JQuery infinite loop through .each iteration with a pause between each iteration

Question

Basically I am looping through tweets. I want to pause for 20seconds between each tweet and after the last tweet I want to go back to tweet one and repeat the process infinitely.

Here is my code so far, I've tried tackling this problem by reading other peoples examples but cant quite seem to hit the nail on the head. I do keep running into the set timeout function too.

// DisplayTweets.
function displayTweets(tweets)
{
    // Checks if any tweets exist.
    if ($.isArray(tweets) !== false)
    {
        // Show error message.
        $('p#tweet').text(tweets);
    }
    else
    {   
        // Parse JSON into Javascript object.
        var objTweets = jQuery.parseJSON(tweets);

        // Loop through 
        $.each(objTweets, function(i, objTweet) {
            //alert(objTweet.tweet);
            $('p#tweet').text(objTweet.tweet);
        }); 
    }
}

Instead of a double-negative !== false why not just use == true or just omit it altogether... if($.isArray(tweets)){...}.. it makes your code much easier to read. — Jamiec
– Jamiec, Commented Oct 7, 2011 at 13:14

Jamiec · Accepted Answer · 2011-10-07 13:25:02Z

4

Just write a function to be called with the array of values:

function displayTweets(arr){
    $('p#tweet').html(arr[0]);
    var i = 1;
    setInterval(
        function(){
            $('p#tweet').html(arr[i]);
            i++;
            if(i >= tweets.length) i = 0;
        },20000);
}

Here's a live example with the time reduced to 2 seconds for demo purpose: http://jsfiddle.net/tjAa6/

answered Oct 7, 2011 at 13:25

Jamiec

136k15 gold badges143 silver badges202 bronze badges

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

1 Comment

Max Silva Over a year ago

thanks mate i edited slightly for my purposes but this worked a treat

meloncholy · Accepted Answer · 2011-10-07 13:22:54Z

2

I wouldn't use $.each as you'd have to stick a pause (perhaps with delay()?) in the loop; setTimeout is probably the best way to do this: just use the callback function to call a show next tweet function recursively.

showTweet(0);

function showTweet(idx)
{
    $("p#tweet").text(objTweets[idx].tweet);
    setTimeout(function () { showTweet((idx + 1) % objTweets.length); }, 20000);
}

answered Oct 7, 2011 at 13:22

meloncholy

2,20220 silver badges16 bronze badges

3 Comments

meloncholy Over a year ago

Actually, delay wouldn't work at all. And @Jamiec's answer is perfectly good too.

Mike Purcell Over a year ago

This should be accepted answer imo, the modulus trick to reset the index is sic.

Mike Purcell Over a year ago

I digress. Using this solution resulted in 'maximum stack exceeded' errors, so I went with @Jamiec's solution and seems to work fine.

Collectives™ on Stack Overflow

JQuery infinite loop through .each iteration with a pause between each iteration

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related