jquery run custom function after another is

Question

Я хочу выполнить пользовательскую функцию только после того, как предыдущая пользовательская функция будет полностью выполнена.

Я пробовал с обещанием, сделал и когда, но он работает неправильно. Fisrt функция полностью не выполняется, когда второй выполняется ...

Например, я хочу, чтобы выполнить function1(), а затем выполнить function2 только тогда, когда function1 делается:

function1(); 
function2(); 

Я пытался с этим, но она не работает вообще:

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

Здесь сценарий моего 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++; 

} 

Answer 1

Вы должны сообщить функции 2 (или что-то, что выполняет функцию 2), когда функция 1 завершена.

var deferredObj = $.Deferred(); 

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

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

Однако JQuery делает это еще проще, сделав $ .ajax возвращение объект обещание.

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

function1().done(function2) 

Answer 2

не из легких, потому что большинство функций не нуждаются в каких-либо «время», чтобы закончить, они просто «делать кучу команд» и после того, что следующая функция вызывается.

В случае JQuery-анимация он работает, как этот (код по JQuery API)

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

В случае если мы хотим использовать анимацию очередь для наших собственных функций можно использовать:

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

Надеюсь, это то, что вы ищете.

Если нет, то имейте в виде, что JQuery анимация имеет встраиваемое решение для успеха-функций:

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

В случае, если вы хотите, чтобы задержать вас команд есть и что-то для вас:

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

В этом случае мы будем ждать 800 мс, чем использовать пульсационный эффект (2000 мс), подождать еще 800 мс и запустить «someOtherFunction».

Answer 3

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


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

}