Panggil suatu fungsi setelah fungsi sebelumnya selesai

Saya memiliki kode JavaScript berikut:

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

Bagaimana saya bisa memastikan yang function2dipanggil hanya setelah function1selesai?

Tentukan panggilan balik anonim, dan buat function1 menerimanya:

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


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

Jika Anda menggunakan jQuery 1.5 Anda dapat menggunakan pola Tangguhan baru:

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

Edit: Tautan blog yang diperbarui:

Rebecca Murphy memiliki artikel bagus tentang ini di sini: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Coba ini :

function method1(){
   // some code

}

function method2(){
   // some code
}

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

Jawaban ini menggunakan promises, fitur JavaScript ECMAScript 6standar. Jika platform target Anda tidak mendukung promises, isi dengan PromiseJs .

Janji adalah cara baru (dan jauh lebih baik) untuk menangani operasi asinkron dalam 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
    });
} 

Ini mungkin tampak seperti overhead yang signifikan untuk contoh sederhana ini, tetapi untuk kode yang lebih kompleks itu jauh lebih baik daripada menggunakan panggilan balik. Anda dapat dengan mudah membuat beberapa panggilan tidak sinkron menggunakan banyak thenpernyataan:

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

Anda juga dapat membungkus jQuery deferrds dengan mudah (yang dikembalikan dari $.ajaxpanggilan):

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

Seperti @charlietfl catat, jqXHRobjek dikembalikan dengan $.ajax()mengimplementasikan Promiseantarmuka. Jadi sebenarnya tidak perlu untuk membungkusnya Promise, itu dapat digunakan langsung:

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

Atau Anda dapat memicu acara khusus ketika satu fungsi selesai, kemudian ikat ke dokumen:

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

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

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

Dengan menggunakan metode ini, fungsi 'b' hanya dapat menjalankan fungsi SETELAH 'a', karena pemicu hanya ada ketika fungsi a selesai dieksekusi.

Anda bisa melakukannya seperti ini

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

Ini tergantung pada apa yang dilakukan function1.

Jika function1 melakukan beberapa javascript synchrounous sederhana, seperti memperbarui nilai div atau sesuatu, maka function2 akan diaktifkan setelah function1 selesai.

Jika function1 melakukan panggilan asinkron, seperti panggilan AJAX, Anda harus membuat metode "panggilan balik" (sebagian besar API ajax memiliki parameter fungsi panggilan balik). Kemudian panggil function2 di dalam callback. misalnya:

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

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

Jika metode 1 harus dijalankan setelah metode 2, 3, 4. Cuplikan kode berikut dapat menjadi solusi untuk ini menggunakan objek Ditangguhkan dalam 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>

Jika function1 adalah beberapa fungsi sinkronisasi yang ingin Anda ubah menjadi async karena butuh beberapa waktu untuk menyelesaikannya, dan Anda tidak memiliki kontrol atasnya untuk menambahkan panggilan balik:

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

Outputnya adalah:

Click handled

... dan setelah 2 detik:

This is function 1
This is function 2

Ini berfungsi karena memanggil window.setTimeout () akan menambahkan tugas ke loop tugas JS runtine, yang dibuat oleh panggilan async, dan karena prinsip dasar "run-to-completion" dari runtime JS memastikan bahwa onClick () tidak pernah terputus sebelum berakhir.

Perhatikan bahwa ini lucu karena mungkin kode ini sulit dimengerti ...