Đặt biến cục bộ trong hàm gọi lại JavaScript

Question

Tôi tương đối mới với JavaScript và tôi nghĩ mình đã biết cách hoạt động của hàm gọi lại nhưng sau một vài giờ tìm kiếm trên web tôi vẫn không hiểu tại sao mã của tôi không hoạt động.

Tôi đang thực hiện yêu cầu AJAX trả về một mảng chuỗi. Tôi đang cố gắng để thiết lập mảng này đến một biến địa phương, nhưng nó dường như mất giá trị của nó ngay sau khi chức năng gọi lại được thực thi.

var array; 

    $.ajax({ 
     type: 'GET', 
     url: 'include/load_array.php', 
     dataType: 'json', 
     success: function(data){ 
      array = data; 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert("Error loading the data"); 
     } 
    }); 

    console.debug(array); 

Trong bảng điều khiển, array xuất hiện dưới dạng không xác định. Bất cứ ai có thể giải thích cho tôi lý do tại sao điều này không được thiết lập và làm thế nào nó có thể thiết lập một biến địa phương trong một chức năng gọi lại.

Answer 1

Vấn đề ở đây là console.log thực hiện đồng bộ trong khi lệnh ajax thực hiện không đồng bộ. Do đó, nó chạy trước khi hoàn thành gọi lại để nó vẫn thấy array là undefined vì success chưa chạy. Để thực hiện công việc này, bạn cần phải trì hoãn cuộc gọi console.log cho đến khi sau khi hoàn thành success.

$(document).ready(function() { 
    var array; 

    var runLog = function() { 
     console.log(array); 
    }; 

    $.ajax({ 
     type: 'GET', 
     url: 'include/load_array.php', 
     dataType: 'json', 
     success: function(data){ 
     array = data; 
     runlog(); 
    }}); 
}); 

Answer 2

Dấu đầu tiên trong ajax là không đồng bộ, có nghĩa là khi bạn đang gỡ lỗi mảng, kết quả vẫn chưa được gửi. Mảng là không xác định tại thời điểm hiển thị giá trị của nó. Bạn cần phải làm console.debug bên dưới mảng = dữ liệu.

Answer 3

Chức năng success không thực thi ngay lập tức, nhưng chỉ sau khi phản hồi HTTP đến. Do đó, array vẫn là undefined vào thời điểm này. Nếu bạn muốn thực hiện các thao tác trên dữ liệu phản hồi HTTP, hãy thực hiện nó từ bên trong hàm success, hoặc cách khác, xác định hoạt động đó bên trong một hàm và sau đó gọi hàm đó từ bên trong cuộc gọi lại success.

Answer 4

AJAX không đồng bộ. Bạn đang đặt biến số array, nhưng không phải cho đến sau đó debug thực thi. Thực hiện cuộc gọi AJAX sẽ gửi yêu cầu nhưng sau đó tiếp tục trong mã. Tại một số điểm sau này, yêu cầu trả về và các hàm success hoặc error của bạn được thực hiện.

Answer 5

Thử gọi một chức năng để thiết lập biến này sau success của bạn:

var array; 

var goodToProceed = function(myArr) { 
    console.debug(myArr); 
}; 

$.ajax({ 
type: 'GET', 
url: 'include/load_array.php', 
dataType: 'json', 
success: function(data){ 
    goodToProceed(data); 
}, 
error: function(jqXHR, textStatus, errorThrown){ 
    alert("Error loading the data"); 
} 
});