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, Jan 16 '14 at 19:54
http://stackoverflow.com/questions/5289275/how-to-use-callback-function-in-javascript-functions — Ankit, Jan 16 '14 at 19:57

Wayne · Accepted Answer · 2014-01-16T20:00:20.807

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.

Ha! We wrote basically the same answer. +1 for great minds thinking alike. — Katie Kilian, Jan 16 '14 at 19:58

Katie Kilian · Answer 2 · 2014-01-16T20:00:45.153

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);
}

aside: typeof is an operator, but your code reads as though it's a function. — dandavis, Jan 16 '14 at 19:59

sequencing order of commands in javascript

2 Answers2