问题描述：业务需求需要用户选择资源进行批量下载
<div class="m1 m">方法1：window.open</div>
<div class="m2 m">方法2：setTimeout</div>
<div class="m3 m">方法3: iframe</div>
<script>
let resourceArr = [
'https://dldir1.qq.com/weixin/android/weixin8016android2040_arm64.apk', // 微信Andorid
'https://dldir1.qq.com/weixin/Windows/WeChatSetup.exe', // 微信Windows
'https://dldir1.qq.com/weixin/mac/WeChatMac.dmg', // 微信Mac
];
</scrIpt>
问题原因：
本质上是浏览器在完成上一个下载链接必须要做的的准备工作之前，就单击了下一个链接，从而取消了上一个下载操作；
如果这不是下载，而是页面的常规链接，那么这就是用户想要的行为：
- 如果用户首先点击页面 A 的链接，然后失去耐心并点击页面 B 的另一个链接，那么页面请求 A 在那一点被取消
- 不需要同时加载两个资源，因为无论如何只能一个页面同时只能展示一个;
解决方案：
方法1： 利用 window.open(url) 实现
let m1 = document.querySelector('.m1');
m1.addEventListener('click', () => {
for (let i = 0; i < resourceArr.length; i++) {
window.open(resourceArr[i])
}
})
缺点：需打开新的窗口体验不好
方法2：利用 setTimeout 添加定时器
const createDowloadLink = (url) => {
let aDom = document.createElement('a') //创建标签i
aDom.setAttribute('download', ''); //dowload设置下载属性
let evt = document.createEvent('HTMLEvents') //创建事件
evt.initEvent('click', false, false) //初始化事件，绑定点击事件，不冒泡，不阻止浏览器默认行为
aDom.href = url;
aDom.dispatchEvent(evt) //分发事件
aDom.click() // 触发事件
}
let m2 = document.querySelector('.m2');
m2.addEventListener('click', () => {
resourceArr.forEach((item, index) => {
setTimeout(() => {
createDowloadLink(item)
}, 500 * (index + 1))
})
})
缺点：时间间隔设置不好，同样会造成有些资源无法下载，例如，如果网速慢，资源响应时间长，这个时候的定时时长就不好估计
image.png
image.png
方法3： 利用 iframe
const iframeDownload = (link) => {
var iFrame = document.createElement('iframe');
iFrame.src = link;
iFrame.style.display = 'none';
document.body.appendChild(iFrame);
}
let m3 = document.querySelector('.m3');
m3.addEventListener('click', () => {
for (let item of resourceArr) {
iframeDownload(item);
}
})
