Javascript 如何按顺序加载这些iframe？

我有一个很大的字符串数组，每个字符串都应该生成/加载一个iframe。其思想是按顺序加载每个iframe：

iframe1已加载→ 开始加载iframe 2。。。等等

我想通过将数组划分为块并并行运行来划分负载。但是，我不知道如何在此设置中按顺序运行每个块的内容

块[0]→ 加载iframe 1→ iframe 1已加载→ 加载iframe 2→ iframe 2已加载→ 完成

块[1]→ 加载iframe 3→ iframe 3已加载→ 加载iframe 4→ iframe 4已加载→ 完成

块[2]→ 加载iframe 5→ iframe 5已加载→ 加载iframe 6→ iframe 6已加载→ 完成

块[3]→ 加载iframe 7→ iframe 7已加载→ 加载iframe 8→ iframe 8已加载→ 完成

块[4]→ 加载iframe 9→ iframe 9已加载→ 加载iframe 10→ iframe 10已加载→ 完成

当所有块完成时，显示结果

我该怎么做

现在，我的代码完成了我想要的一切，除了顺序加载：

var promiseArray=[]；
var urlParams=[1,2,3,4,5,6,7,8,9,10]；
var maxLength=urlParams.length/5；
var chunks=divideArray（urlparms，maxLength）；
对于（var chunkIndex=0；chunkIndex{
var urlParam=urlParams[paramIndex]；
变量iframe=$（''）；
iframe.prependTo（“正文”）；
iframe.on（“加载”，函数（）{
//var iframeBody=iframe.contents（）.find（'body'）；
iframe.remove（）；
log（'Iframe-'+urlParam）；
解析（'Iframe-'+urlParam+'loaded'）；
});
})
)
}
}
promiseArray.then（函数（结果）{
控制台日志（结果）；
});
函数divideArray（数组，maxLength）{
var chunks=[]；
对于（变量i=0；i

使用原始承诺链接异步操作相当麻烦，但以下是如何使用

异步

函数：

提取将iframe加载到

async

函数中的代码

创建另一个

async

函数，为块中的每个URL顺序调用第一个函数

其余部分与您已有的代码大致相同：为每个块调用块处理函数，并使用

Promise.all

var promiseArray = [];
var urlParams = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var maxLength = urlParams.length / 5;
var chunks = divideArray(urlParams, maxLength);

for (var chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
    var urlParams = chunks[chunkIndex];
    console.log('Chunk-' + chunkIndex);
    promiseArray.push(processChunk(urlParams));
}

Promise.all(promiseArray).then(function (result) {
    console.log(result);
});


async function processURL(urlParam) {
    return new Promise((resolve, reject) => {
        var iframe = $('<iframe src="https://gist.github.com/joonaspaakko/414c4a43ac092f562e07e1642fa75dc5.pibb?val=' + urlParam + '"></iframe>');
        iframe.prependTo('body');
        iframe.on("load", function () {
            console.log('Iframe-' + urlParam);
            resolve('Iframe-' + urlParam + ' loaded.');
        });
    });
}


async function processChunk(chunk) {
    var urlResults = [];
    for (var paramIndex = 0; paramIndex < urlParams.length; paramIndex++) {
        var urlResult = await processURL(chunk[paramIndex]);
        urlResults.push(urlResult);
    }
    return urlResults;
}


function divideArray(array, maxLength) {
    var chunks = [];
    for (var i = 0; i < array.length; i += maxLength) {
        chunks.push(array.slice(i, i + maxLength));
    }
    return chunks;
}

var promiseArray=[]；
var urlParams=[1,2,3,4,5,6,7,8,9,10]；
var maxLength=urlParams.length/5；
var chunks=divideArray（urlparms，maxLength）；
对于（var chunkIndex=0；chunkIndex{
变量iframe=$（''）；
iframe.prependTo（“正文”）；
iframe.on（“加载”，函数（）{
log（'Iframe-'+urlParam）；
解析（'Iframe-'+urlParam+'loaded'）；
});
});
}
异步函数processChunk（块）{
var urlResults=[]；
对于（var paramIndex=0；paramIndex

---

使用此方便的实用程序功能：

/**
 * Given an Iterable (an array, for example), or a promise of an Iterable,
 * iterates serially over all the values in it, executing the given iterator on each element.
 *
 * @tutorial https://stackoverflow.com/a/41608207/3563013
 * @tutorial http://bluebirdjs.com/docs/api/promise.each.html
 * @tutorial https://jsfiddle.net/mckabue/zmf3tL9k/11/ - you can queue mapped promises
 *
 * @param { Iterable<any> | Promise<Iterable<any>> } items
 * @param { Function } fn
 * @param {*} options
 */
export default function promiseEach(items, fn, options) {
    options = Object.assign({}, {
        continueOnFail: false,
        startValue: undefined,
        nonArrayError: "Non array passed to each",
        emptyArrayResolveValue: undefined
    }, options);
    // invalid input
    if (!Array.isArray(items)) {
        return Promise.reject(new Error(options.nonArrayError));
    }
    // empty case
    if (items.length === 0) {
        return Promise.resolve(options.emptyArrayResolveValue);
    }
    return items.reduce((accumulator, currentValue, currentIndex, array) => {
        return accumulator[!!options.continueOnFail ? 'finally' : 'then'](function () {
            return fn(currentValue, currentIndex, array);
        });
    }, Promise.resolve(options.startValue));
}

/**
 * Given an Iterable (an array, for example), or a promise of an Iterable,
 * iterates serially over all the values in it, executing the given iterator on each element.
 *
 * @tutorial https://stackoverflow.com/a/41608207/3563013
 * @tutorial http://bluebirdjs.com/docs/api/promise.each.html
 * @tutorial https://jsfiddle.net/mckabue/zmf3tL9k/11/ - you can queue mapped promises
 *
 * @param { Iterable<any> | Promise<Iterable<any>> } items
 * @param { Function } fn
 * @param {*} options
 */
export default function promiseEach(items, fn, options) {
    options = Object.assign({}, {
        continueOnFail: false,
        startValue: undefined,
        nonArrayError: "Non array passed to each",
        emptyArrayResolveValue: undefined
    }, options);
    // invalid input
    if (!Array.isArray(items)) {
        return Promise.reject(new Error(options.nonArrayError));
    }
    // empty case
    if (items.length === 0) {
        return Promise.resolve(options.emptyArrayResolveValue);
    }
    return items.reduce((accumulator, currentValue, currentIndex, array) => {
        return accumulator[!!options.continueOnFail ? 'finally' : 'then'](function () {
            return fn(currentValue, currentIndex, array);
        });
    }, Promise.resolve(options.startValue));
}