我有很多字符串,每个字符串最终都应该制作/加载一个iframe。想法是依次加载每个iframe:iframe 1 loaded → start loading iframe 2... etc..
我想通过将数组划分为多个块并并行运行来划分负载。但是,我无法弄清楚如何在此设置中依次运行每个块的内容。
块[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→完成
当所有块都完成后,显示结果。
我怎么做?
现在,我的代码可以完成我想要的一切,除了顺序加载:
JSFiddle
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 );
for ( var paramIndex=0; paramIndex < urlParams.length; paramIndex++) {
promiseArray.push(
new Promise((resolve, reject) => {
var urlParam = urlParams[ paramIndex ];
var iframe = $('<iframe src="https://gist.github.com/joonaspaakko/414c4a43ac092f562e07e1642fa75dc5.pibb?val=' + urlParam + '"></iframe>');
iframe.prependTo('body');
iframe.on("load", function() {
// var iframeBody = iframe.contents().find('body');
iframe.remove();
console.log( 'Iframe-'+ urlParam );
resolve( 'Iframe-'+ urlParam +' loaded.');
});
})
)
}
}
Promise.all( promiseArray ).then(function( result ) {
console.log(result);
});
function divideArray( array, maxLength ) {
var chunks = [];
for ( var i=0; i < array.length; i+=maxLength ) {
chunks.push( array.slice(i,i+maxLength) );
}
return chunks;
}
最佳答案
使用原始的诺言链接异步操作相当麻烦,但是这是使用async
函数的方法:
提取将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;
}
关于javascript - 如何依次加载这些iframe?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59554993/