javascript - 仅在从 jquery 中的 ajax 调用获得结果后才调用其他函数

Question

这是我的功能：

loadChildNodes($('#budgetline' + id));
$('.child-of-budgetline' + id).each(function(){
    $(this).expandTreeNode();
    console.log("test");
});

loadChildNodes($element) 函数进行 ajax 调用。我想等到这个功能完成，然后只执行它之后的行。但不会这样。我怎样才能使其他行仅在函数 loadChildNodes 完成后才执行。

Answer 1

使用可通过以下方式获得的承诺deferred objects：

$.when(loadChildNodes($('#budgetline' + id))).done(function() {
    $('.child-of-budgetline' + id).each(function(){
       $(this).expandTreeNode();
       console.log("test");
    });
})
.fail(function() {
   /* some errors occured */
})

要正常工作loadChildNodes()，应该返回一个promise（解决 ajax 成功回调并拒绝错误回调）或 ajax 对象本身（$.ajax或其他快捷方式，如$.get... $.post）

Answer 2

Use $.when().then() to do stuff once AJAX completes, e.g:

$.when(loadChildNodes($('#budgetline' + id))).then(function() { 
    //stuff 
});

Answer 3

Introduce a callback parameter for loadChildNodes and call that callback in the success callback of ajax call inside that method.
Now refactor your code in way that the remaining lines of code will be moved to callback and passed to loadChildNodes method.

loadChildNodes($('#budgetline' + id), function() {
   $('.child-of-budgetline' + id).each(function(){     
     $(this).expandTreeNode();     
     console.log("test"); 
   }); 
}); 

Answer 4

您需要将 ajax 调用作为对象返回：

loadChildNodes($('#budgetline' + id)).done(function() {
    $('.child-of-budgetline' + id).each(function(){
        $(this).expandTreeNode();
        console.log("test");
    });
});

function loadChildNodes(elem) {
    return $.ajax({

       //do ajax
    });
}