Run function only after another function is complete

Question

I have been trauling the web to find an answer to this, but everything I find seems to fail.

In a function I want to disable a href link. Once this function is complete (including animations) I want to re-enable the link.

I currently have the following:

function prev() {
    $prevId = $('.active').prev('.slide-item').attr('id');
    if ($prevId) {
        $('#prev').bind('click', false);            
        var id = '#'+$prevId;
        $('#thumb-list li a.current').removeClass('current');
        var thumb = '#thumb-list li a'+id;
        $(thumb).addClass('current');
        $('.active').transition({ left: offCanvas }, 300, function() { $(this).hide(); }).removeClass('active');
        setTimeout(function() {
            $(id).addClass('active').css({ left: -pageWidth }).show().transition({ left: 0 }, 300).css("-webkit-transform", "translate3d(0px,0px,0px)"):
        }, 30); 
        prevFinished();
    } else {
        $('.active').css("-webkit-transform", "translate3d(0px,0px,0px)");
        id = '#'+$('.active').attr('id');
    }
    $prevId = $(id).prev('.slide-item').attr('id');
    $nextId = $(id).next('.slide-item').attr('id');
    prevNextCheck();
}

function prevFinished() {
    $('#prev').unbind('click', false);
}

But it doesn't work at all.

If anyone could point me in the right direction that would be great.

PS I tried using callbacks, but unless I am doing something terribly wrong it failed every time.

Answer 1

As stated in the previous answer you could use jQuery's Deferred and Promises. Depending on when exactly you'd want your functions to be executed it'd look something like this:

var deferred = new $.Deferred();
var promise = deferred.promise();

$('.someClass').transition({ left: 0 }, 300, function(e) {
    // .. maybe do some other stuff or maybe not
    deferred.resolve();
});

promise.then(someFunction);

function someFunction() {
    // this runs after your transition has finished
}

You can of course chain multiple then together if you wanted.

Additionally if you have multiple functions that you need to wait for to finish you could also use $.when and wait for all of them to finish.

$.when(promise1,promise2).then(someFunction);

Answer 2

There are a few methods of accomplishing this.

Solution one is to use callbacks. Your animation sequences look overly complex, but it appears you are making a rotation animation for multiple objects, and I don't know the requirements of it. But, one thing I can say is that your callbacks are only encapsulating a small amount of functionality from the looks of it. Widen it out to include EVERY action that is expected to occur after the animation.

Solution two is to use deferred objects and promises . I'm not the best person to ask for a working example of how this works, but the functionality fits your requirement.

Both of these routes are documents jquery features that just need to be put in place correctly.