Использование отложенных с AJAX

Question

У меня есть ряд js-функций, которые выполняют вызовы базы данных с помощью ajax, и мне нужно, чтобы они заканчивали и обновляли переменные перед переходом к конечной функции. Я пытаюсь использовать jquery $ .when и мне не повезло ... в прикрепленном jsfiddle вы можете увидеть, что окончательный результат функции отображается до обновления двух основных функций.

http://jsfiddle.net/b20hvyyp/

var x1 = '%'; 
var x2 = '%'; 

main(); 

function main(){ 
    logProgress('start'); 
    $.when(a(), b()).done(logProgress(x1 + x2)); 
} 

// called by main() 
function a() { 
    return $.ajax("/echo/html").pipe(function(data){ 
      function changex1() { 
      x1 = 'x1Changed'; 
     }; 

     setTimeout(changex1(),2000); 
     logProgress(x1); 
    }); 
} 

// called by a() 
function b() { 
     return $.ajax("/echo/html").pipe(function(data){ 
      function changex2() { 
      x2 = 'x2Changed'; 
     }; 

     setTimeout(changex2(),5000); 
     logProgress(x2); 
    }); 
} 

function logProgress(message){ 
    $('#progress').append('<li>'+message+'</li>'); 
} 

Любая помощь будет высоко оценена !!

Answer 1

Здесь следует отметить две вещи. Функции a() & b() возвращает отложенные объекты из вызова ajax. Эти отложенные объекты будут разрешены, как только вызовы ajax завершатся. Таким образом, вам не удастся обнаружить выполнение обратных вызовов таймаута. В следующем случае функция() принимает список отложенного объекта и возвращает один отложенный объект, который будет разрешен после того, как будут разрешены все входные отложенные объекты. Таким образом, выполняемая функция в if(), возвращаемой отложенной, должна получить функцию обратного вызова вместо оператора logProgress (x1 + x2). Вот ссылка с модификациями, который работает: Link

var x1 = '%'; 
 
var x2 = '%'; 
 

 
main(); 
 

 
function main(){ 
 
    logProgress('start'); 
 
    console.log('asdf') 
 
    $.when(a(), b()).done(function() { 
 
    logProgress(x1 + x2) 
 
    }); 
 
// a().done(function(){ 
 
// logProgress(x1 + x2); 
 
// }); 
 
} 
 

 
// called by main() 
 
function a() { 
 
\t logProgress('a called'); 
 
    return $.ajax("/echo/html").pipe(function(data){ 
 
    function changex1() { 
 
\t \t x1 = 'x1Changed'; 
 
    }; 
 
    
 
    changex1(); 
 
    logProgress(x1); 
 
    }); 
 
} 
 

 
// called by a() 
 
function b() { 
 
\t logProgress('b called') 
 
    return $.ajax("/echo/html").pipe(function(data){ 
 
    function changex2() { 
 
\t \t x2 = 'x2Changed'; 
 
    }; 
 
    
 
    changex2(); 
 
    logProgress(x2); 
 
    }); 
 
} 
 

 
function logProgress(message){ 
 
    $('#progress').append('<li>'+message+'</li>'); 
 
}

<ul id="progress"> 
 
</ul>

Answer 2

согласно Deffered документации ваш код должен быть таким:

var d1 = $.Deferred(); 
var d2 = $.Deferred(); 

main(); 

function main(){ 
    logProgress('start'); 
    $.when(d1, d2).done(function (x1, x2) { 
     logProgress(x1 + x2) 
    }); 
    a(); 
    b(); 
} 

// called by main() 
function a() { 
    return $.ajax("/echo/html").then(function(data){ 
     x1 = 'x1Changed'; 
     logProgress(x1); 
     d1.resolve(x1); 
    }); 
} 

// called by a() 
function b() { 
    return $.ajax("/echo/html").then(function(data){ 
     x2 = 'x2Changed'; 
     logProgress(x2); 
     d2.resolve(x2); 
    }); 
} 

function logProgress(message){ 
    $('#progress').append('<li>'+message+'</li>'); 
} 

когда ожидает Defereds, defereds должен быть решен отклоненных, я не знаю, почему вы использовали время ожидания, поскольку они действительно вызвали задержку настройки выполнения от x1 и x2 до основной функции