CODEWITHSUNDEEP
jquerycallbackwaitdeferred
freaky
freaky

Reputation: 1010

jquery run custom function after another is done

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++;

}

Upvotes: 2

Views: 14057

Answers (3)

raghul
raghul

Reputation: 1510

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();

}

Upvotes: 0

Proximo
Proximo

Reputation: 41

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".

Upvotes: 1

Kevin B
Kevin B

Reputation: 95047

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)

Upvotes: 4

Related Questions