Question

我遇到的情况是我试图执行一个最终会在UI上填充视图的方法。想知道是否有人可以正确引导我。

在jquery上启动时，我将一些函数称为：

function XYX(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data to set some values on UI

    })

}

function PQR(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data to set some values on UI

    })

}

现在发生的是两个ajax调用的返回结果是在UI上设置字段，我最终想用它来设置另一个视图，再次进行ajax调用，然后使用自己的结果和XYZ和PQR的结果设置一些东西。

function FINAL(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data and fields set by XYZ() and PQR() to set some values on UI

    })

    //Do some other stuff
}

当进行AJAX调用时，我不能相信调用FINAL函数时结果可用，并且我无法将这三个结合起来生成视图。

处理这种情况的最佳方法是什么。

Answer 1

首先，你应该从两种方法中返回承诺的价值：

function XYX(){
    //Make a ajax call - return the Promise
    return $.ajax(
    {

    }).
    done(function(data){    
        //Use the data to set some values on UI    
    })    
}

对PQR()执行相同操作。

然后使用$.when在两者完成时执行操作

$.when(XYX(),PQR()).then(function(){
   //both XYX and PQR have completed
});

Answer 2

完成所有三项操作后，您可以使用$.when()运行代码。只需返回$.ajax在每个函数中创建的承诺

function one(){
  return $.get('one.html').done(function(data){
    $('body').append(data);
  });      
}

function two(){
  return $.get('two.html').done(function(data){
    $('body').append(data);
  });      
}

function three(){
  return $.get('three.html').done(function(data){
    $('body').append(data);
  });      
}


$(function(){
   $.when(one(),two(),three()).done(function(resp1, resp2, resp3){
    // do something here when all are done
    $('body').append('<p>All done</p>')
   })
 });

请注意，$.get()是$.ajax的包装，用于简化演示。

如果各个函数中每个done()的执行顺序很重要，您可以使用$.when.done()回调来处理每个请求的数据，而不是在每个函数中执行它

的 DEMO

在执行其他方法之后调用方法

2 个答案: