Gọi một chức năng sau khi chức năng trước hoàn thành

Tôi có mã JavaScript sau:

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

Làm thế nào tôi có thể đảm bảo rằng function2chỉ được gọi sau khi function1đã hoàn thành?

Chỉ định một cuộc gọi lại ẩn danh và làm cho hàm1 chấp nhận nó:

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


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

Nếu bạn đang sử dụng jQuery 1.5, bạn có thể sử dụng mẫu Trì hoãn mới:

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

Chỉnh sửa: Cập nhật liên kết blog:

Rebecca Murphy đã có một bài viết tuyệt vời về vấn đề này tại đây: http://rmurphey.com/blog/2010/12/25/deferreds-asing-to-jquery/

Thử cái này :

function method1(){
   // some code

}

function method2(){
   // some code
}

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

Câu trả lời này sử dụng promises, một tính năng JavaScript của ECMAScript 6tiêu chuẩn. Nếu nền tảng mục tiêu của bạn không hỗ trợ promises, hãy hoàn thành nó với PromiseJs .

Hứa hẹn là một cách mới (và tốt hơn rất nhiều) để xử lý các hoạt động không đồng bộ trong 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
    });
} 

Điều này có vẻ như là một chi phí đáng kể cho ví dụ đơn giản này, nhưng đối với mã phức tạp hơn thì tốt hơn nhiều so với sử dụng các cuộc gọi lại. Bạn có thể dễ dàng xâu chuỗi nhiều cuộc gọi không đồng bộ bằng nhiều thencâu lệnh:

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

Bạn cũng có thể dễ dàng bao bọc các trình trì hoãn jQuery (được trả về từ $.ajaxcác cuộc gọi):

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

Như @charlietfl đã lưu ý, jqXHRđối tượng được trả về bằng cách $.ajax()thực hiện Promisegiao diện. Vì vậy, không thực sự cần thiết phải bọc nó trong một Promise, nó có thể được sử dụng trực tiếp:

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

Hoặc bạn có thể kích hoạt một sự kiện tùy chỉnh khi một chức năng hoàn thành, sau đó liên kết nó với tài liệu:

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

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

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

Sử dụng phương pháp này, hàm 'b' chỉ có thể thực thi chức năng SAU 'a', vì trình kích hoạt chỉ tồn tại khi chức năng a thực hiện xong.

bạn có thể làm như thế này

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

Điều này phụ thuộc vào chức năng1 đang làm gì.

Nếu function1 đang thực hiện một số javascript đồng bộ đơn giản, như cập nhật giá trị div hoặc một cái gì đó, thì function2 sẽ kích hoạt sau khi function1 hoàn thành.

Nếu function1 thực hiện cuộc gọi không đồng bộ, chẳng hạn như cuộc gọi AJAX, bạn sẽ cần tạo phương thức "gọi lại" (hầu hết các API của ajax đều có tham số chức năng gọi lại). Sau đó gọi hàm2 trong cuộc gọi lại. ví dụ:

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

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

Nếu phương thức 1 phải được thực thi sau phương thức 2, 3, 4. Đoạn mã sau đây có thể là giải pháp cho việc này bằng cách sử dụng đối tượng Trì hoãn trong 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>

Nếu function1 là một số chức năng đồng bộ hóa mà bạn muốn biến thành một async vì phải mất một thời gian để hoàn thành và bạn không có quyền kiểm soát nó để thêm một cuộc gọi lại:

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

Đầu ra sẽ là:

Click handled

... và sau 2 giây:

This is function 1
This is function 2

Điều này hoạt động vì việc gọi window.setTimeout () sẽ thêm một tác vụ vào vòng lặp tác vụ runtine của JS, đây là điều mà một cuộc gọi async tạo ra và bởi vì nguyên tắc cơ bản là "chạy đến hoàn thành" của thời gian chạy JS đảm bảo rằng onClick () không bao giờ bị gián đoạn trước khi nó kết thúc.

Lưu ý rằng điều này thật buồn cười vì nó có thể là mã khó hiểu ...