Search jQuery

jQuery Forum

Getting Started

ksat90

Making a loop wait for event

in Getting Started • 1 year ago

I'm trying to make a list of tweets fade in and out progressively down the list.

I'm pretty new to javascript and jquery, so I might be missing out on some basics.

Questions

1. How do I make the while loop infinite and loop around itself, because I'd like the tweets to loop around when it reaches the last tweet. I tried adding the if statement to make it go back to 0 but it hangs my page when I include it.

2. How do I make the loop not run altogether at once? I've tried queue() and putting in delay(4000) right before the .eq(n) so that it delays 4000ms before selecting the next tweet, but I'm trying to find a more elegant solution to it as the timing might be offset infinitely if there are changes in the timings.

var $j = jQuery.noConflict();
$j(document).ready(function() {
var tweet = $j('#twitter-3 .tweets li').length;
var n = 0;
while (n <= tweet) {
$j('#twitter-3 .tweets li').eq(n).delay(500).fadeIn(1000).delay(2000).fadeOut(500);
n++;
//if (n == tweet) {
// n = 0;
//};
};
});

Replies(5)

Kevin B

Re: Making a loop wait for event

1 year ago

you can't delay a while loop, and if a while loop has no end, it will hang the browser.

Instead, you can use set interval. the code below is not tested, give it a shot.

function fadeInTweet(tweet) {
tweet.delay(500).fadeIn(1000).delay(2000).fadeOut(500);
}
var tweets = $j("#twitter-3 .tweets li");
var currTweet = 0;
setInterval(function(){
fadeInTweet(tweets.eq(currTweet));
if ( tweets.eq(currTweet+1).length ) {
currTweet++;
}
else {
currTweet = 0;
}
},3000);

so, every three seconds, a tweet is faded in over one second, sits there for two seconds, then fades out over the next half second while the next is fading in.

-- Kevin

ksat90

Re: Making a loop wait for event

1 year ago

Oh! So I see setInterval sets a fixed 3000ms before it calls the function fadeInTweet.

Mmmm. At least it makes more sense than including the timer in the loop itself, as well as using a loop for an infinite interval, which makes for a potential for lots of errors.

Thanks Kevin!

Though Kevin's solution worked pretty well...

While searching for answers I stumbled upon this piece of code from a tutorial on callbacks.

I'm not really sure how this works but I'm trying to use this since it's so concise.

The part I didn't quite understand was the 3rd line - from what I read it's getting the number of elements that is not initially selected by eq(0), then I don't understand what it does with it, or how it selects the subsequent elements to fade in or out (fadeOut in this case).

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'))

Kevin B

Re: Making a loop wait for event

1 year ago

its a self executing function, pretty impressive in my opinion. i'll break it down for you.

First, the hidenext(jq) function is executed on all anchor tags inside of bodyContent.

The first one is selected and faded out quickly. When it is done fading out, the first element is removed from the array of selected elements, and the function calls itself with the resulting object.

The purpose of the "&&" is if the first part(which gets executed immediately and returns a jquery object) returns 0, the function doesn't get called again. If the first statement returns a falsy value(such as a length of zero) the second statement doesn't need to be called because the conditional is already false.

(function hidenext(jq){
jq.eq(0).delay(500).fadeIn(1000).delay(2000).fadeOut(500, function(){
(jq=jq.slice(1)).length && hidenext(jq);
});
})($('div#bodyContent a'))

It is just a function that calls itself.

-- Kevin

ksat90

Re: Making a loop wait for event

1 year ago

So the second hidenext(jq) is a function to call itself again if jq.slice(1) still has any elements left?

How do I make a loop of this so it runs indefinitely?

I tried using setInterval but it doesn't work.

EDIT: Okay maybe I used it incorrectly, but now it works

This is my current implementation that relies on the code I mentioned + setInterval to call it every 30seconds. The additional 500ms is a headroom for any possible delay (not sure whether I need it, but I just like to be safe).

However, there is sometimes a bug where it'll display more than one tweet, which is very odd. I still can't find the exact problem. It might have something to do with setInterval not running correctly when there is no window focus on it in Google Chrome.

var jq = $j('#twitter-3 .tweets li');
function showt(jq){
jq.eq(0).fadeIn(500).delay(5000).fadeOut(500, function(){
(jq=jq.slice(1)).length && showt(jq);
});
};
showt(jq);
setInterval(function() {
showt(jq);
},30500);

ksat90

Re: Making a loop wait for event

1 year ago

Ah I tried some stuff out and finally managed to get the whole loop thing right

It's a variation of the previous snippet of code.

Instead of using slice(1) to "delete" the first tweet everytime, I used eq(n) now to select the nth number of tweet and use the self-callback loop to add n and reloop n to 0 if it reaches the end.

A much more elegant solution than using timers I feel.

Thanks a lot Kevin for the help, if not I wouldn't have reached here!

var n = 0;
(function showt(jq){
jq.eq(n).fadeIn(500).delay(500).fadeOut(500, function(){
n++;
if (n == 5) { n = 0; };
showt(jq);
});
})($j('#twitter-3 .tweets li'));

Top Reply

Response title

Attachments

jQuery Forum

Making a loop wait for event

Replies(5)

Re: Making a loop wait for event

Re: Making a loop wait for event

Re: Making a loop wait for event

Re: Making a loop wait for event

Re: Making a loop wait for event

Statistics

Tags

Actions

Related Posts