sequencing order of commands in javascript

Question

inside my demo function , i have a fadeout function. this function animate an image by fading it out and it runs for few seconds.

i want an alert to run only after this fading is completed. . it's not working this way. the alert is popping out before the fading is completed.

is there any way to sequence it beside calculating the runtime of each function and creating accordingly setTimeout for each command?

the Demo function:

function Demo() {
    fadeout(liran0);
    alert("hello");
}

the fadeout function is needed for analysis:

function fadeout(element) {
    var op = 1; // initial opacity
    var timer = setInterval(function () { //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

call alert in fadeout() just after clearInterval(), or pass a callback to fadeout(), or use a promise. — dandavis
– dandavis, Commented Jan 16, 2014 at 19:54

Wayne · Accepted Answer · 2014-01-16 20:00:20Z

2

You're calling the alert immediately after kicking off the animation, which happens asynchronously. Instead do this:

function fadeout(element, finished) {
    var op = 1; // initial opacity
    var timer = setInterval(function() { //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            if (typeof finished === "function") {
                finished();
            }
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

fadeout(liran0, function() {
    alert("hello");
});

The callback to fadeout isn't executed until the animation is complete.

edited Jan 16, 2014 at 20:00

answered Jan 16, 2014 at 19:55

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

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

2 Comments

Wayne Over a year ago

Updated with a callback type check

Katie Kilian Over a year ago

Ha! We wrote basically the same answer. +1 for great minds thinking alike.

Katie Kilian · Accepted Answer · 2014-01-16 20:00:45Z

0

If you take a look at the jQuery library does it, you will see that they always provide a callback function that gets called when the animation is finished running. Look at the slideUp() method, for example. Its second parameter takes a callback that is called when it is finished.

So, the approach here will be to call your callback after the clearInterval() call, like this.

function fadeout(element, complete) {
    var op = 1; // initial opacity
    var timer = setInterval(function () { 
        //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the 
                          // op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            if ( typeof complete === 'function' ) {
                complete();
            }
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

edited Jan 16, 2014 at 20:00

answered Jan 16, 2014 at 19:54

Katie Kilian

7,0435 gold badges45 silver badges67 bronze badges

1 Comment

dandavis Over a year ago

aside: typeof is an operator, but your code reads as though it's a function.

Collectives™ on Stack Overflow

sequencing order of commands in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related