javascript execution order

Question

I am starting to learn Javascript and jQuery. I wanted to make a simple slide show with jQuery which displays list unordered list items one by one.

My code is here: on jsfiddle

I thought that I'd make the slideshow by iterating over list items in a for loop and display them with fadeIn and fadeOut effects like below:

for(var i = 0; i < 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .fadeIn()
        .delay(1000)
        .fadeOut();
}

But it only shows the last item in the list.

I read that I need to close the value of i variable in a separate function because of the Javascript scope that it sees the value of i is being increased to 2 in the loop. So, I made a separate function which closes the value of i and called the function. But it was still same, displaying the last item of the list.

So, I just wanted to try without the loop by making two separate effects on list items like below:

$('#slider li:first-child')
    .fadeIn()
    .delay(1000)
    .fadeOut();
$('#slider li:nth-child(2)')
    .fadeIn()
    .delay(1000)
    .fadeOut();

But it doesn't display the list items sequentially like written above. When you run the code, it seems like the first item is shown really fast and the last item is displayed as intended.

I have written it like a C or Java code, thinking that it would execute from top to bottom. But it seems like Javascript is different and I didn't understand a key concept of Javascript.

So, my question is why it is not displaying the list items in order and only displaying the last item, and what should I need to know to make it work as intented.

Thank you.

Thanks everybody for the answers!

Ari
– Ari

2011-01-24 01:32:02 +00:00
Commented Jan 24, 2011 at 1:32 — Ari
– Ari, Commented Jan 24, 2011 at 1:32

mVChr · Accepted Answer · 2011-01-19 06:24:15Z

3

Since the reasons why yours didn't work have already been covered, instead I've set up a new fiddle for you with the following working slideshow code and commented explanation:

$('#slider li').hide();

// Method 3
var slideIt = function ( which ) {
    $('#slider li:nth-child('+ which +')')
        .fadeIn(300)
        .delay(1000)
        .fadeOut(300, function() { // after animation complete
            which++; // increment which child
            which = (which > $('#slider li').length) ?
                    1 : // if last child loop back to beginning
                    which;
            slideIt( which ); // call again with new child
        });
};

slideIt( 1 ); // start the process

answered Jan 19, 2011 at 6:24

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

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

Comments

goat · Accepted Answer · 2011-01-19 05:54:41Z

Animations are implemented behind the scenes by using many incremental calls to setTimeout()/setInterval(), which basically just queues up future tasks. So, the actual function calls you made in your code are not synchronous operations, it all finished within a microsecond, and many future tasks were enqueued.

This shows it a bit better, the second animation being scheduled to start far enough into the future so as not to interfere.

for(var i = 0; i < 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .delay(2000 * i)
        .fadeIn()
        .delay(1000)
        .fadeOut();
}

I don't do much animation in jquery, but I do know that some animation functions accept a function as an argument, which will be called once it's animation finishes. This makes it easier to do serial animations because you dont need to do time/math calculation trickery.

As for why it's done like this- javascript is single threaded, and synchronous operations that don't complete quickly can easily block the ui. SO you gotta fudge it and queue stuff up, which the browser does at its liesure.

codeandcloud · Accepted Answer · 2011-01-19 06:50:30Z

1

A much simpler method will be

$(document).ready(function () {
    $('#slider li:gt(0)').hide();
    setInterval(
        function () {
            $('#slider li:first-child')
                .fadeOut()
                .next('li')
                .fadeIn()
                .end()
                .appendTo('#slider');
        }
    , 3000);
});

It uses JavaScript SetInterval method.

You can view the code in action here

P.S: jQuery's implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is "1-indexed"

answered Jan 19, 2011 at 6:50

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Collectives™ on Stack Overflow

javascript execution order

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related