我有很多字符串,每个字符串最终都应该制作/加载一个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/

10-12 12:30
查看更多