Вызов функции после завершения предыдущей функции

У меня есть следующий код JavaScript:

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

Как я могу убедиться, что function2вызов вызывается только после function1завершения?

Укажите анонимный обратный вызов и заставьте function1 принять его:

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


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

Если вы используете jQuery 1.5, вы можете использовать новый шаблон Deferreds:

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

Изменить: Обновленная ссылка на блог:

Ребекка Мерфи написала отличную статью об этом здесь: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Попробуй это :

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

Этот ответ использует promisesфункцию ECMAScript 6стандарта JavaScript . Если ваша целевая платформа не поддерживает promises, заполните ее с помощью PromiseJs .

Обещания - это новый (и намного лучший) способ обработки асинхронных операций в JavaScript:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable).then(function() {
            //this function is executed after function1
            function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
    return new Promise(function (fulfill, reject){
        //do stuff
        fulfill(result); //if the action succeeded
        reject(error); //if the action did not succeed
    });
} 

В этом простом примере это может показаться значительным перерасходом, но для более сложного кода это гораздо лучше, чем использование обратных вызовов. Вы можете легко объединить несколько асинхронных вызовов, используя несколько thenоператоров:

function1(someVariable).then(function() {
    function2(someOtherVariable);
}).then(function() {
    function3();
});

Вы также можете легко обернуть jQuery deferrds (которые возвращаются из $.ajaxвызовов):

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

Как отметил @charlietfl, jqXHRвозвращаемый объект $.ajax()реализует Promiseинтерфейс. Так что на самом деле не нужно оборачивать его в Promise, его можно использовать напрямую:

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

Или вы можете вызвать пользовательское событие после завершения одной функции, а затем привязать его к документу:

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

Используя этот метод, функция 'b' может выполнять только ПОСЛЕ функции 'a', поскольку триггер существует только после завершения функции a.

Вы можете сделать это так

$.when(funtion1()).then(function(){
    funtion2();
})

Это зависит от того, что делает function1.

Если function1 выполняет какой-то простой синхронный javascript, такой как обновление значения div или чего-то еще, то function2 сработает после завершения function1.

Если function1 выполняет асинхронный вызов, такой как вызов AJAX, вам необходимо создать метод «обратного вызова» (большинство API-интерфейсов ajax имеют параметр функции обратного вызова). Затем вызовите function2 в обратном вызове. например:

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

Если метод 1 должен быть выполнен после метода 2, 3, 4. Следующий фрагмент кода может быть решением для этого с использованием отложенного объекта в JavaScript.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

Выход будет:

Click handled

... и через 2 секунды:

This is function 1
This is function 2

Это работает, потому что вызов window.setTimeout () добавит задачу к циклу рутинной задачи JS, что и делает асинхронный вызов, и потому что основной принцип «от завершения к завершению» среды выполнения JS гарантирует, что onClick () никогда не прерывается до его окончания.

Обратите внимание, что это так смешно, как может быть, код трудно понять ...