Question

我正在尝试使用c3js显示一些图表。我遇到了需要在循环中“暂停”foreach循环和异步操作的问题。我可以通过添加一个允许“工作”完成的空警报来破解它（请参阅下面的代码中的警报）。我如何解决这个问题并让它发挥作用？按下按钮时会调用showData函数。

selectedFiles = [];    
function showData(){
        displayChart(selectedFiles,function(cols){
            alert("");//fixme
            //display chart
            chart = c3.generate({
                bindto: '#chart',
                data: {
                  columns: cols,
                type:'bar'},
                bar: {
                        width: {
                            ratio: 0.5 
                        }
                    }
            });     
        });
    }

    function displayChart(files,completionHandler)
    {
        var columns = [];
        $.each(files, function( index,value) {
            //create array with file name, and averageDuration
            var fileName = value + ".json";
            var averageDuration;
            $.getJSON(fileName, function(json) {
                averageDuration = json.averageDuration;
                var col = [value,averageDuration]; 
                columns.push(col);
            });         
        });
        completionHandler(columns);
    }

Answer 1

因为ajax是异步的，你不能像那样使用它

function displayChart(files, completionHandler) {
    var src = $.map(files, function (value) {
        var fileName = value + ".json";
        return $.getJSON(fileName);
    });
    $.when.apply($, src).done(function (data) {
        var columns;
        if (files.length > 1) {
            columns = $.map(arguments, function (array, idx) {
                return [[files[idx], array[0].averageDuration]]
            });
        } else {
            columns = [
                [files[0], data.averageDuration]
            ]
        }
        completionHandler(columns);
    })
}

演示：Fiddle

在jquery中的async foreach

1 个答案: