Виклик функції після завершення попередньої функції

У мене є такий код JavaScript:

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

Як я можу забезпечити function2виклик лише після function1завершення?

Вкажіть анонімний зворотний дзвінок і змусьте функцію1 прийняти його:

$('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, ви можете використовувати новий шаблон відкладених дій:

$('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функцію JavaScript ECMAScript 6стандарту. Якщо ваша цільова платформа не підтримує 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 (які повертаються з $.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();
})

Це залежить від того, яку функцію1 виконує.

Якщо function1 робить якийсь простий синхронний javascript, наприклад оновлення значення div або щось подібне, функція2 запуститься після завершення функції1.

Якщо 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 () ніколи не переривається, перш ніж закінчиться.

Зауважте, що це так смішно, як це може бути кодом важко зрозуміти ...