Question

我已经有一系列仪表板对象要添加到页面中，但是我发现JavaScript通过阵列的速度远远快于我的Ajax端点可以响应，所以它结束了所有的回调尝试更新最终元素。

循环：

for( i=0, l=dashboards.length; i<l; i++ ){
    $("#dashboard-container").append(template(dashboards[i]["templateargs"]));
    var cur_id = dashboards[i]["templateargs"]["dashboard-id"];
    var chart = $("#"+cur_id+"-chart");
    var table = $("#"+cur_id+"-table tbody");
    $.ajax({
        type: "GET",
        url: dashboards[i]["ajaxurl"],
        error: function() { alert('AJAX error'); },
        success: dashboards[i]["callback"]
    });
}

示例回调：

function(data) {
    $.plot(chart, data, chart_options);
    for(i=0;i<data.length;i++) {
        table.append("<tr><td>"+data[i]['label']+"</td><td>"+data[i]['data']+"</td></tr>");
    }
}

我对事件驱动编程并不是那么好，而JS的变量范围对我来说也很奇怪。如何正确更新这些面板？

Answer 1

我没有测试过这个，但我相信它会起作用。您需要链接回调，以便只有在前一个ajax请求的回调被触发后才会增加i。

    for( i=0, l=dashboards.length; i<l; i++ ){
        $("#dashboard-container").append(template(dashboards[i]["templateargs"]));
        var cur_id = dashboards[i]["templateargs"]["dashboard-id"];
        var chart = $("#"+cur_id+"-chart");
        var table = $("#"+cur_id+"-table tbody");
    }
    start_ajax_chain(0,dashboards.length,dashboards);

    function start_ajax_chain(i,l,dashboards){
    if(i<l){
       $.ajax({
               type: "GET",
               url: dashboards[i]["ajaxurl"],
               error: function() { alert('AJAX error'); },
               success: function(data){
                         callback = dashboards[i]["callback"];  
                         callback(data);
                         i++;
                         start_ajax_chain(i,l,dashboards);}
             });

         }
    }

Ajax回调更新了最后引用的元素

1 个答案: