Установка локальной переменной в функции обратного вызова JavaScript

Question

Я относительно новичок в JavaScript, и я подумал, что знаю, как работают функции обратного вызова, но после нескольких часов поиска в Интернете я все еще не понимаю, почему мой код не работает.

Я делаю AJAX-запрос, который возвращает массив строк. Я пытаюсь установить для этого массива локальную переменную, но, похоже, он теряет свое значение при выполнении функции обратного вызова.

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

В консоли array отображается как неопределенное. Может ли кто-нибудь объяснить мне, почему это не устанавливается и как можно установить локальную переменную в функции обратного вызова.

Answer 1

Проблема в том, что console.log выполняется синхронно, в то время как вызов ajax выполняется асинхронно. Следовательно, он запускается до завершения обратного вызова, поэтому он по-прежнему видит array как undefined, поскольку success еще не запущено. Чтобы сделать это, вам нужно отложить вызов console.log до завершения 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

Первый A в ajax предназначен для Asynchronous, что означает, что к тому времени, когда вы отлаживаете массив, результат все еще не был доставлен.Массив не определен в точке отображения его значения.Вам нужно сделать console.debug ниже array = data.

Answer 3

Попробуйте вызвать функцию для установки этой переменной после success:

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");
}
});

Answer 4

Функция success выполняется не сразу, а только после получения HTTP-ответа. Следовательно, array все еще undefined на данный момент. Если вы хотите выполнить операции с данными HTTP-ответа, сделайте это из функции success или, альтернативно, определите эту операцию внутри функции и затем вызовите эту функцию из обратного вызова success.

Answer 5

AJAX является асинхронным. Вы устанавливаете переменную array, но только после этого debug выполняется. Выполнение вызова AJAX отправляет запрос, но затем продолжается в коде. В какой-то момент позже запрос возвращается, и ваши success или error функции выполняются.