jquery中的异步foreach

async foreach in jquery

本文关键字:foreach 异步 jquery      更新时间:2023-09-26

我正在尝试使用c3js显示一些图表。我遇到了一个问题,需要在foreach循环中使用异步操作来"暂停"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);
    } 

由于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