เรียกใช้ฟังก์ชันหลังจากฟังก์ชันก่อนหน้านี้เสร็จสมบูรณ์

ฉันมีรหัส 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);
    }
});

แก้ไข: ลิงค์บล็อกที่อัปเดต:

Rebecca Murphy มีบทความที่ยอดเยี่ยมมากมายที่นี่: 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, Polyfill กับ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อินเทอร์เฟซ ดังนั้นจึงไม่จำเป็นต้องห่อไว้ใน a 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 กำลังทำจาวาสคริปต์แบบง่าย ๆ เช่นการปรับปรุงค่า div หรือบางอย่าง function2 จะเริ่มทำงานหลังจากที่ function1 เสร็จสิ้น

หาก function1 ทำการโทรแบบอะซิงโครนัสเช่นการโทร AJAX คุณจะต้องสร้างวิธีการ "เรียกกลับ" (ajax API ส่วนใหญ่มีพารามิเตอร์ฟังก์ชั่นการโทรกลับ) จากนั้นเรียกใช้ 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 runtine ซึ่งเป็นสิ่งที่ทำให้การโทรแบบ async ทำและเนื่องจากหลักการพื้นฐานของ ไม่เคยถูกขัดจังหวะก่อนที่จะจบ

โปรดสังเกตว่านี่เป็นเรื่องตลกเพราะอาจเป็นรหัสที่เข้าใจยาก ...