Resolved: jQuery callback after function is complete

In this post, we will see how to resolve jQuery callback after function is complete

Question:

I have a script that has a lot of height animations. So i figured I could juste make one function with the animation and call it whenever I want. The thing is, when the function is complete I have various things that can be done.
So this is the solution I have so far that works well but that isn’t satisfying (hard to know which condition applies in which case):

function animateHeight(element,height,duration,condition){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine',
            complete : function(){
                if     (condition==1){...}
                else if(condition==2){...}
                else if(condition==3){...}
                etc...  
            }
        }
    );
}

function x(){ animateHeight(container,300,450,1) }
function y(){ animateHeight(container,300,450,2) }

But I would rather do the conditions just after the call instead like:

function animateHeight(element,height,duration){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine'
        }
    );
}

function x(){    
    animateHeight(container,300,450).aferCompletion(function(){
        my custom condition 1
    });
}

function y(){    
    animateHeight(container,300,450).aferCompletion(function(){
        my custom condition 2
    });
}

I looked in Stack overflow and found dozens of answers but, for the life of me, all failed in my case.
Here are, from the top of my head, some attempts I tried (and some were even found in Stack Overflow) but didn’t work in my case:

function animateHeight(element,height,duration,condition){ ....}
function x(){ animateHeight(container,300,450,1, function(){console.log('ok')})}

function animateHeight(element,height,duration,condition,callback){ callback();}
function x(){  animateHeight(container,300,450,1, function(){console.log('ok')})}

function animateHeight(element,height,duration,condition){}
function x(){ animateHeight(container,300,450,1).done(function(){console.log('ok')})}

function animateHeight(element,height,duration,condition){}
function x(){   $.when(animateHeight(container,300,450,1)).done(function(){console.log('ok')})}

function animateHeight(element,height,duration,condition){}
function x(){ $.when(animateHeight(container,300,450,1)).then(function(){console.log('ok')})}

function animateHeight(element,height,duration,condition){data='ok';return data;}
function x(){ animateHeight(container,300,450,1).then(function(data){console.log('ok')})}

async function animateHeight(element,height,duration,condition){return;}
function x(){ await animateHeight(container,300,450,1).then(function(){console.log('ok')})}

Most answers I found are variants with a function calling a third function when the second is done, which isn’t what I want. I want a function to be called and then get back a green light when it’s complete so that I can do something else directly. The answers dealing with my case are harder to find, for whatever reason.

Best Answer:

You can pass your code as a callback function, and call it from completion:

function animateHeight(element,height,duration, callback){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine',
            completion: callback
        }
    );
}

animateHeight(container,300,450, function() {
    my custom condition 1
});

animateHeight(container,300,450, function() {
    my custom condition 2
});

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Question:

Best Answer:

Related