JQuery: Как добиться последовательного выполнения?

Question

[Вадим Левен]

Есть следующий код, по нажатии на x-кнопку вызывается функция process. Функция load выполняет запрос к файлу php, который возвращает JSON-объект.

function load() {
    $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
            key = JSON.parse(data);
    });
}
function process() {
    load(); 
    alert(window.key);
    /* последующий код */
}

Проблема заключается в том, что при первом клике на x-кнопку, alert выводит undefined. При втором клике уже выводит массив значений, тот самый требующий результат. Понятно, что имею дело с асинхронностью... Как добиться того, чтобы alert(window.key) и последующий код выполнялись только после выполнения load() ?

Comments

[Вадим Левен]

Хорошо, спасибо!
Еще, а если у меня в функции load будет так:

function load() {
    $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
            key = JSON.parse(data);
    });
    $.post("engine/loadC.php", {fileName : "value.txt"}, function(data) {        
            value = JSON.parse(data);
    });
}
function process() {
    load(); 
    alert(window.key);
    /* последующий код */
}

[Вадим Левен]

Всем Добра! Совместными усилиями решил проблему следующим образом:
[Примечание: alert использую лишь для проверки значения переменной, т.е. готовности ее для дальнейшего использования]

function load() {
    $.post("engine/loadC.php", {fileName : "keyList.is"}, function(data) {        
            key = JSON.parse(data);            
    }).then(function() {
            $.post("engine/loadC.php", {fileName : "valueList.is"}, function(data) {        
                value = JSON.parse(data);
                process();
        });
    });
}
function process() {
    alert(window.key);
    alert(window.value);
    /* последующий код */
}

Answer 1

[Alexey Svirschevskiy]

а еще лучше так:

function load() {
    return $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
            key = JSON.parse(data);
    });
}

function process() {
    load().then(function(){
      alert(window.key);
    }); 
    /* последующий код */
}

если несколько аякс запросов можно так

function loadKey() {
  return $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
    key = JSON.parse(data);
  });
}
function loadValue(){
  return $.post("engine/loadC.php", {fileName : "value.txt"}, function(data) {        
    value = JSON.parse(data);
  });
  
}
function process() {
  $.when(loadvalue(), loadKey()).then(function(){
    alert(window.key);
  } 
}

если принципиально делать аякс запросы в одной функции:

function load() {
  var $def = new $.Deferred;

  $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
    key = JSON.parse(data);
  }).then(function(){
    $.post("engine/loadC.php", {fileName : "value.txt"}, function(data) {        
      value = JSON.parse(data);
      $def.resolve();
    });
  })

  return $def;
}

function process() {
  load().then(function(){
    alert(window.key);
  } 
}

Answer 2

[smoked]

function load() {
    $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
            key = JSON.parse(data);
            aftercode();
    });
}
function process() {
    load(); 
   
}

function aftercode() {
    alert(window.key);
    /* последующий код */
}

Answer 3

[Евгений Комаров]

Установите async: false в настройках ajax запроса к серверу. что-то вроде того

function load() {
    var key;
    $.ajax({
        url: 'engine/loadC.php',
        data: {'filename': 'key.txt'},
        async: false,
        type: 'post',
        dataType: 'json',
        success: function(data) {
            key = json.parse(data);
        }
    });
    return key;
}
function progress() {
    load();
    alert(window.key);
}

Comments

[trueClearThinker]

@maNULL не очень хорошая практика использовать "async: false". На время выполнения запроса, блокируется JS на странице.

Answer 4

[Yuri Morozov]

Связать асинхрон и синхрон просто так не получится.
Либо паковать логику в асинхронное что-нибудь, либо ждать по таймеру.

Пример: по нажатии кнопки вызывать не process(), а load(), а вызов process перенести в success хендлер.

Answer 5

[Тимур Сергеевич]

function load() {
    $.post("engine/loadC.php", {fileName : "key.txt"}, function(data) {        
            key = JSON.parse(data);
           alert(window.key);
    });
}
function process() {
    load(); 
    
    /* последующий код */
}