jquery run custom function after another is done

Question

I want to execute a custom function only after the previous custom function is completely done.

I tried with promise, done and when but it's not working correctly. The fisrt function is not completely done when the second is executed...

For example, I want to execute function1() then execute function2 only when function1 is done :

function1();
function2();

I tried with this but it's not working at all :

promise(function1()).done(function2);

Here the script of my function1 :

function function1() {

    nbofslides = $('.Slide img').length;
    currentslide = 1;

    if ( nbofslides == currentslide) {

        if ( nbofslides > 1) {
            for (i = 1 ; i <= nbofslides ; i++) {
                if (i == 1) {
                    $('.slider-pagination').append('<li class="slider-page selected bgcolor2"></li>');
                } else {
                    $('.slider-pagination').append('<li class="slider-page bgcolor2"></li>');
                }
            }
        }

        $('.iosSlider').iosSlider({
            responsiveSlideContainer: true,
            responsiveSlides: true,
            snapToChildren: true,
            desktopClickDrag: true,
            keyboardControls: true,
            infiniteSlider: true,
            navSlideSelector: true,
            autoSlide: false,
            navNextSelector: $('.slider-next'),
            navPrevSelector: $('.slider-prev'),
            navSlideSelector: $('.slider-pagination .slider-page'),
            onSlideChange: slideChange
            });

        var setHeight = $('.iosSlider .Slide:eq(0)').outerHeight(true);
        $('.iosSlider').css({
            height: setHeight
        });

        function slideChange(args) {
        $('.slider-pagination .slider-page').removeClass('selected');
        $('.slider-pagination .slider-page:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
        }

    }
    currentslide++;

}

Solution 1

You have to inform function 2 (or something that executes function 2) when function 1 is complete.

var deferredObj = $.Deferred();

var function1 = function () {
    ... do some stuff ...
    ... and an ajax request ...
    $.ajax(...).done(function(){
        deferredObj.resolve();
    });
}

deferredObj.done(function(){
    function2();
});

However, jQuery makes this even easier by making $.ajax return a promise object.

var function1 = function() {
    return $.ajax(...);
}

function1().done(function2)

Solution 2

Not an easy one, because most functions don't need any "time" to complete, they just "do a bunch of commands" and after that the next function is called.

In case of JQuery-Animations it runs like that (code by JQuery API)

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
...

If if we want use animation-queue for our own functions we can use:

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.queue(function () {
  alert('We are now at step 4 and if you press OK we go to 5.');
  $(this).dequeue();
});
div.animate({left:'-=200'},1500);
...

I hope that's what you are looking for.

If not, keep in mind that jQuery animations have a build-in solution for success-functions:

div.animate({left:'-=200'},1500,function(){
  // if animation done, use this code here
});

In case you want to delay you commands there is also something for you:

div.delay(800).effect("pulsate", {}, 2000).delay(800).queue(someOtherFunction);

In that case we would wait 800ms, than use the pulsate-effect (2000ms), wait another 800ms and than startup "someOtherFunction".