javascript - jquery 中的异步 foreach

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