Question

我有一个javascript函数，可以使用ajax请求创建大量面板。在请求给我一个有效的json后，我填充所有小部件，如下所示：

function createAllWidgets() {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

我有另一个函数可以更改窗口小部件中某些.text()个对象的div：

function setWidget(priceUSD, priceEUR, widget) {
    $('#' + widget + '-EUR').text(priceEUR);
    $('#' + widget + '-USD').text(priceUSD);
}

由于某些原因，填充id时无法找到/使用ajax。如果未使用ajax创建窗口小部件（但在静态html中），则它确实有效..

修改我在生成小部件的函数中创建了callback：

function createAllWidgets(callback) {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

然后我创建了一个新函数来调用上面两个函数：

function initStart() {
    createAllWidgets(function() {
        setWidget(1,1,'widget1');
    });
}

但这仍然不起作用..

Answer 1

ajax 是异步的，这意味着在函数返回后将调用 done 处理程序。您添加回调的解决方案不起作用，因为您尚未调用它。

如果您仍想使用回调，请添加以下内容：

$('#widgets').html(html); // This is yours
callback();               // <- Add this

更好的方法是使用jqXHR事件 - 就像完成：

function initStart() {
    createAllWidgets().done(function() {
        setWidget(1,1,'widget1');
    });
}

无法改变文字

1 个答案: