javascript - 如何按顺序加载这些 iframe？

Question

我有一大堆字符串，每个字符串最终都应该制作/加载一个 iframe。这个想法是按顺序加载每个 iframe:iframe 1 loaded → start loading iframe 2... etc..

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

1. Chunk[0] → 加载 iframe 1 → 加载 iframe 1 → 加载 iframe 2 → 加载 iframe 2 → 完成
2. block [1] → 加载 iframe 3 → 加载 iframe 3 → 加载 iframe 4 → 加载 iframe 4 → 完成
3. Chunk[2] → 加载 iframe 5 → 加载 iframe 5 → 加载 iframe 6 → 加载 iframe 6 → 完成
4. block [3] → 加载 iframe 7 → 加载 iframe 7 → 加载 iframe 8 → 加载 iframe 8 → 完成
5. block [4] → 加载 iframe 9 → 加载 iframe 9 → 加载 iframe 10 → 加载 iframe 10 → 完成
6. 当所有 block 完成后显示结果。

我该怎么做？

现在我的代码做我想做的一切，除了顺序加载:

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;
}

Answer 1

使用原始 promises 链接异步操作相当麻烦，但您可以使用 async 函数来实现:

1. 将加载 iframe 的代码提取到 async 函数中
2. 创建另一个 async 函数，它会为 block 中的每个 URL 按顺序调用第一个函数。

3. 其余部分与您已有的代码或多或少相同:为每个 block 调用 block 处理函数，并等待所有 block 使用 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;
   }