利用javascript批量下载文件以防止浏览器超时的好方法

Question

因此，首先，我在这里使用fancybox库。

http://fancyapps.com/fancybox/

我的最终目标是创建一个通过云前端下载存储在亚马逊S3上的图片的相册。现在，它被设置为有一个主页，每个页面都有一张图片。单击该图像，它将打开一个相册。

问题是，如果我的相册有75个项目或任何较大的项目，浏览器将超时并崩溃或导致我的计算机耗尽内存(我正在本地运行它，因为我开发它)。

下面是一些示例代码

​

function photoDL(){
  var num = 0;
  var batch = 0;
    for(i = 1; i < 62; i++){
    var myphoto = 'https://MYCODEFRONTSTUFF/'+i+'.jpg';
    var albumpic = new Array();
    albumpic.push(myphoto);

    for(batch = 1; batch < 5; batch++){
      $.fancybox.open([
        {
          src  : albumpic[num],
          opts : {
            caption : 'First caption'
          }
        },
      ], {
        loop : false,
        hash : "album3"
      });
      setTimeout(photoDL(), 10000);
      num += 1;



    }


  }
}

​

我知道里面有些东西看起来不太对劲。我在想，我可以将SetTimeout设置为buffer，并给它一些时间来下载每个图像，但这并没有帮助。它仍然试图一次下载所有这些文件。我正在尝试创建批处理的想法，但遇到了死胡同。任何帮助都是非常感谢的。

Answer 1

你的代码循环61次，在每个循环中，你有运行5次的内部循环。在每个内部循环中，您打开新的fancyBox实例(覆盖现有的实例)，然后调用主循环！

所以，你打开fancyBox 243次，10000ms之后，你打开了58,806个新实例，你想知道为什么你的浏览器崩溃了？:)

Answer 2

感谢你的见解，我确实设法弄清楚了这一点。介绍固定代码

​

function photoDL(batch, url, ftype){
  var num = 0;
  var fArr = [];
  var albumpic = new Array();
  var fboxOpen = '';
  for(i = 1; i < batch; i++){
  var myphoto = url+i+ftype;
  albumpic[i] = myphoto;
  //console.log(albumpic[i]);
  var fboxOpen =
    {
      src  : albumpic[i],
      opts : {
        caption : 'First caption'
      }
    };
  fArr[i] = fboxOpen;

  }
  fArr.shift();
  var jsonString = JSON.stringify(fArr);
  console.log(jsonString);


  $.fancybox.open(
    fArr
    , {
      loop : false,
      hash : "album3"
    });
  }

​

有点慢，但它确实有效！