Javascript обновления скрытое значение

Question

У меня есть функция: Вызов функции

function add() { 
    $.ajax({ 
     type: "POST", 
     url: "add.php", 
     async: "false", // Tried both- async: "false/true" 
     data: { 
      name: 'Test', 
     }, 
     success: function(data) { 
      document.getElementById('id').value = data; 
      id = document.getElementById('id').value; 
      alert(id); // alerts here proper value 
     } 
    }); 

} 

function testMyFunction() { 
    add(); 

    // 'id' was set in add function. 
    id = document.getElementById('id').value; 
    alert(id); // Here does not alert value but blank(no value) 
    // This 'id' value is used at other place but here is issue. 
} 

testMyFunction() дает вышеназванный вопрос.

В чем может быть проблема?

Answer 1

$ .ajax - это асинхронный вызов, и он обновляет поле «id» после завершения. Ваш код проверяет его значение в функции testMyFunction() сразу после вызова (и до запуска: функция (данные) вызывается).

Answer 2

JavaScript является асинхронным Язык. Вкратце, это означает, что ваш код должен NEVER блок: функции должны либо немедленно завершаться, либо получить вызов позже, то есть после завершения некоторых операций ввода/вывода (например, запрос AJAX).

Отредактировано: Кстати, ваш код не работает, потому что даже с async: false функцией success вызывается в цикле событий, таким образом, это может произойти даже после того, как код, который следует синхронной AJAX. Если вы используете async: true, AJAX заблокирует, но функция success будет называться асинхронно в любом случае. Так обрабатывать данные синхронно, вы должны работать не с success функции, а с объектом, который возвращается $.ajax() вызова:

var xhr = $.ajax({ 
    type: "POST", 
    async: false, 
    url: "add.php", 
    data: { 
     name: 'Test', 
    }, 
}); 
alert(xhr.responseText); // Alerts result 

Таким образом, вы должны никогда использования async: false. Вместо этого лучше реорганизовать свой код, чтобы быть похожим на это:

function add(callback) { 
    $.ajax({ 
     type: "POST", 
     url: "add.php", 
     data: { 
      name: 'Test', 
     }, 
     success: callback 
    }); 
} 

function testMyFunction() { 
    add(function(data) { 
     // This closure will be called AFTER the request is complete. 
     document.getElementById('id').value = data; 
     alert(data); // Alerts proper value. 
    }); 
} 

В основном, это псевдо-код НЕПРАВИЛЬНО:

result1 = action1(); 
result2 = action2(result1); 
result3 = action3(result2); 

... и должно быть написано так:

action1(function(result1) { 
    action2(result1, function(result2) { 
     alert(action3(result2)); 
    }); 
});