問題描述：業(yè)務(wù)需求需要用戶選擇資源進(jìn)行批量下載
<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>
問題原因：
本質(zhì)上是瀏覽器在完成上一個下載鏈接必須要做的的準(zhǔn)備工作之前，就單擊了下一個鏈接，從而取消了上一個下載操作；
如果這不是下載，而是頁面的常規(guī)鏈接，那么這就是用戶想要的行為：
- 如果用戶首先點(diǎn)擊頁面 A 的鏈接，然后失去耐心并點(diǎn)擊頁面 B 的另一個鏈接，那么頁面請求 A 在那一點(diǎn)被取消
- 不需要同時加載兩個資源，因為無論如何只能一個頁面同時只能展示一個;
解決方案：
方法1： 利用 window.open(url) 實(shí)現(xiàn)
let m1 = document.querySelector('.m1');
m1.addEventListener('click', () => {
for (let i = 0; i < resourceArr.length; i++) {
window.open(resourceArr[i])
}
})
缺點(diǎn)：需打開新的窗口體驗不好
方法2：利用 setTimeout 添加定時器
const createDowloadLink = (url) => {
let aDom = document.createElement('a') //創(chuàng)建標(biāo)簽i
aDom.setAttribute('download', ''); //dowload設(shè)置下載屬性
let evt = document.createEvent('HTMLEvents') //創(chuàng)建事件
evt.initEvent('click', false, false) //初始化事件，綁定點(diǎn)擊事件，不冒泡，不阻止瀏覽器默認(rèn)行為
aDom.href = url;
aDom.dispatchEvent(evt) //分發(fā)事件
aDom.click() // 觸發(fā)事件
}
let m2 = document.querySelector('.m2');
m2.addEventListener('click', () => {
resourceArr.forEach((item, index) => {
setTimeout(() => {
createDowloadLink(item)
}, 500 * (index + 1))
})
})
缺點(diǎn)：時間間隔設(shè)置不好，同樣會造成有些資源無法下載，例如，如果網(wǎng)速慢，資源響應(yīng)時間長，這個時候的定時時長就不好估計
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);
}
})
