Chờ chức năng để kết thúc - thi công là không đồng bộ (không theo thứ tự)

Question

Tôi đang cố gắng để có được thành phố của người dùng và nước trước khi chuyển sang với mã của tôi. Dường như javascript không được thực thi theo thứ tự tôi cần.

$(document).ready(function() {  
    var country, city = ''; 

    function geoData() { 
    $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
     console.log('step 1'); 
     country = data.country; 
     city = data.city; 
     console.log('step 2'); 
    }); 
    }; 

    geoData();   
    console.log('step 3'); 

    /* rest of the code */ 
}); 

Tôi muốn mã được thực hiện như sau:

step 1 
step 2 
step 3 

Tuy nhiên khi tôi chạy kịch bản tôi nhận được:

step 3 
step 1 
step 2 

Tại sao mã chạy một cách không đồng bộ? Bất kỳ đề xuất làm thế nào tôi có thể sửa chữa nó?

Cảm ơn.

Answer 1

Yêu cầu AJAX không đồng bộ - đó là những gì chữ A đầu tiên viết tắt. Nếu bạn có logic phụ thuộc vào dữ liệu được trả về bởi yêu cầu, nó cần phải được đặt trong hàm gọi lại. Hãy thử điều này:

var country, city = ''; 

function geoData() { 
    $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
     console.log('step 1'); 
     country = data.country; 
     city = data.city; 
     console.log('step 2'); 

     step3(); 
    }); 
}; 

function step3() { 
    console.log('step 3'); 
} 

geoData(); 

Một cách khác là sử dụng một lời hứa, mặc dù dòng chảy logic là tương đương:

var country, city = ''; 

function geoData() { 
    return $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
     console.log('step 1'); 
     country = data.country; 
     city = data.city; 
     console.log('step 2'); 
    }); 
}; 

var deferred = geoData(); 
$.when(deferred).done(function() { 
    console.log('step 3'); 
}); 

Answer 2

Sử dụng jQuery hứa hẹn sẽ có được kết quả mong muốn của bạn, như vậy:

var geoDataRequest = function() { 

    var deferred = $.Deferred(); 

    $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
     deferred.resolve(data); 
    }); 

    return deferred.promise(); 
}; 

var somefunction = function() { 

    // This will return a promise 
    var getGeoData = geoDataRequest(); 

    // The appropriate function will be called based on if the promise is resolved or rejected through the success and error functions in the AJAX request 
    getGeoData.then(

     // Done response 
     function (result) { 
      alert("Success! "); 
      // Enter logic here for step 2 and 3 
     }, 

     // Fail response 
     function (xhr, status, errorThrown) { 
      // Handle errors here... 
     } 
    ); 
}; 

somefunction(); 

Ngoài ra, bây giờ bạn có thể sử dụng geoDataRequest bất cứ khi nào bạn muốn và xử lý các kết quả khác nhau nếu bạn muốn!