JQuery如何等待返回直到getJSON完成？ （Web api）

Question

我正在制作一个包含web api和JQuery的项目。其中一个html页面必须显示商店和经理的商店名称。

每家商店都有：
ID，
STORENAME，
经理ID。

每位经理都有：
ID，
ManagerName。

商店没有直接保存经理名称。

代码如下所示：

// There is a html code with <table id='table'>...</table> before the script.
var storesUri = 'api/stores' //The stores uri
$(document).ready(function() {
    $.getJSON(storesUri)
        .done(function(data) {
            $.each(data, function(key, item) {
                $('#table).append(
                    '<tr>' +
                    '<td>' + item.ID + '</td>' +
                    '<td>' + item.storeName + '</td>' +
                    '<td>' + findManagerNameByID(item.ManagerID) + '</td>' + //get the manager name by the manager id
                    '</tr>');
            });
        });
});

var managersUri = 'api/managers' //The managers uri
function findManagerNameByID(id) {
    var res = 'N/A';
    $getJSON(managersUri + '/' + id)
        .done(function(data) {
            res = data.ManagerName; //puts in res the fit manager name
        })
        .fail(function(jqXHR, testStatus, err) {
            res = 'None';
        });
    //alert('1');
    return res;
}    

在此代码之后，表必须为每个商店包括商店ID，商店名称和商店经理名称。而不是每个商店的表包括商店ID，商店名称和'N / A'（res的默认值）。

问题是，如果我添加代码“alert（'1'）;”在返回之前（你可以在commant中看到它）该表是可以的，它将为每个商店包括我想要的商店ID，商店名称和商店经理。

我认为这是因为'返回资源'而发生的。某种方式在'res = data.ManagerName;'之前发生了line（我认为，因为当代码在返回之前有一点延迟警报时，一切都没问题）。 如何在没有警报的情况下正确填写表格？ 感谢。

Answer 1

这里的问题是请求（getJSON）以异步方式运行，因此代码启动请求并为每个结果注册回调处理程序，然后返回当前值res（是'N / A'）。

您可以强制它同步运行，但可能不使用该便捷功能。我不记得它的确切语法，但jQuery文档非常好。如果getJSON没有'同步'模式，那么您可以随时返回ajax内部由getJSON使用的功能。

Answer 2

函数getJSON是异步的，所以我建议你改变你的函数：

function findManagerNameByID(id){

为：

function findManagerNameByID(id, callback){

因此，当getJSON返回一个值（done）时，您可以在回调函数中使用它，如：

var managersUri='api/managers' //The managers uri
function findManagerNameByID(id, callback){
  var res = 'N/A';
  $getJSON(managersUri+'/'+id)
  .done(function(data){
    // use the callback
    res=data.ManagerName;    //puts in res the fit manager name
    callback(res);
  })
  .fail(function(jqXHR, testStatus, err){
    res='None';
  });
}


// when you call your function pass the callback....
findManagerNameByID('thisId', function(res) {
  // use your res value right now
})

Answer 3

不是将返回放在var中，而是可以从完成或失败返回。我认为“无”将与“N / A”相同，无需使用var。所以这部分代码看起来像

$getJSON(managersUri+'/'+id)
            .done(function(data){
                return data.ManagerName;    //puts in res the fit manager name
            })
            .fail(function(jqXHR, testStatus, err){
                return 'None';
            });