多个函数的JavaScript回调

Question

我目前正在尝试从api控制器中获取结果，并将该json数据添加到我的剃刀视图中的表中。在创建表之前，我使用了用于填充未填充数据的表的一些问题。我试图用回调来解决这个问题，但我仍然没有经验，并且无法从教程中获得理解。

下面是javascript函数我有（而且为了他们必须1. $ .getJson 2. fillArray功能3. AddToTable功能）：

$(document).ready(function() 
{ 


    $.getJSON('api/GetRestaurants/detroit').done(fillArray(data)) 


}); 

function fillArray(data, callback) 
{ 
    var restaurant = 
    { 
     Name: "", 
     PhoneNumber: "", 
     PlaceID: "", 
     Rating: 0, 
     Website: "" 
    }; 

    var dataArray = new Array(); 

    for (var k = 0; k < data.length; k++) { 
     restaurant.Name = data[k].Name; 
     restaurant.PhoneNumber = data[k].PhoneNumber; 
     restaurant.PlaceID = data[k].PlaceID; 
     restaurant.Rating = data[k].Rating; 

     dataArray.push(restaurant); 

    } 
    callback(AddToTable(dataArray)); 
} 
function AddToTable(dataArray) { 
    document.getElementById("tbl").innerHTML = 
     '<tr>' + 
     '<th>Restaurant Name</th>' + 
     '<th>Restaurant PlaceID</th>' 
    for (var i = 0; i < dataArray.length; i++) { 
     +'<tr>' 
     + '<td>' + dataArray[i].Name + '</td>' 
     + '<td>' + dataArray[i].PlaceID + '</td>' 


     + '</tr>'; 
    } 
} 

的数据是存在的，并且API控制器调用是成功的，我只需要数据在表使用该数组之前填充数组。

我感谢任何帮助和/或评论，谢谢你们：]。

Answer 1

fillArray函数中的所有命令看起来都是同步的（即代码在完成之前不会移动），只要在您的函数添加数据之前调用该函数即可。

Answer 2

当你做到以下几点：

$.getJSON('api/GetRestaurants/detroit').done(fillArray(data)) 

您呼叫的fillArray()功能，并将其结果传递给.done()功能。相反，您应该将fillArray函数传递给.done()函数。

$.getJSON('api/GetRestaurants/detroit').done(fillArray) 

我更喜欢在设置回调时使用匿名函数。然后命名的函数可以拥有对他们有意义的签名。匿名回调函数当然有它所需的签名。然后在匿名回调函数中调用命名的函数。

$(document).ready(function() { 
    $.getJSON('api/GetRestaurants/detroit').done(function(data) { 
     var restaurants = createRestaurantArray(data); 
     addRestaurantsToTable(restaurants); 
    }); 
}); 

function createRestaurantArray(apiData) { 
    var restaurants = []; // Preferred syntax over "new Array()" 
    for (var i = 0; i < apiData.length; i++) { 
     restaurants.push({ 
      Name: apiData[i].Name, 
      PhoneNumber: apiData[i].PhoneNumber, 
      PlaceID: apiData[i].PlaceID, 
      Rating: apiData[i].Rating, 
      Website: "" 
    }); 
    return restaurants; 
} 

function addRestaurantsToTable(restaurants) { 
    var html = '<tr>' 
     + '<th>Restaurant Name</th>' 
     + '<th>Restaurant PlaceID</th>' 
     + '</tr>'; 
    for (var i = 0; i < restaurants.length; i++) { 
     html += '<tr>' 
      + '<td>' + restaurants[i].Name + '</td>' 
      + '<td>' + restaurants[i].PlaceID + '</td>' 
      + '</tr>'; 
    } 
    $('#tbl').html(html); 
} 

---

此外，您的fillArray()函数创建单个restaraunt对象和推动该同一对象到所述阵列的for循环的每次迭代。这意味着结果数组将包含相同的对象一遍又一遍，并且该对象将具有循环的最后一次迭代设置的属性值。