浏览器的异步行为导致多个文件下载时没有全部执行

此处用例涉及的传参urls，是一个用","拼接的文件url字符串，如"img1.jpg,img2.jpg,img3.jpg"

downloadFile(urls) {// 将URL字符串分割成数组const urlArray = urls.split(',');// 定义一个递归函数来处理每个URLfunction downloadNext(index) {if (index >= urlArray.length) return; // 所有文件下载完毕const url = urlArray[index].trim(); // 去除URL前后的空格console.log("当前下载文件url: ", url);// 创建一个隐藏的<a>标签const tempLink = document.createElement("a");tempLink.style.display = "none";tempLink.href = url;// 从URL中提取文件名和扩展名const filename = url.substring(url.lastIndexOf('/') + 1);tempLink.setAttribute("download", filename);// 如果浏览器不支持download属性，则打开新窗口if (typeof tempLink.download === "undefined") {tempLink.setAttribute("target", "_blank");}// 将<a>标签添加到文档中并触发点击事件document.body.appendChild(tempLink);tempLink.click();// 移除<a>标签document.body.removeChild(tempLink);// 使用setTimeout确保每个文件下载请求之间有间隔setTimeout(() => {downloadNext(index + 1);}, 1000); // 1秒间隔，可以根据需要调整}// 开始下载第一个文件downloadNext(0);}

浏览器的异步行为导致多个文件下载时没有全部执行，当一个文件下载请求被触发后，浏览器可能需要一些时间来处理这个请求，而在这段时间内，下一个文件的下载请求可能已经被触发，导致只有一个文件被下载。

解决这个问题，可以使用异步编程技术（如setTimeout或Promise）来确保每个文件下载请求之间有足够的间隔时间。以下是使用setTimeout的解决方案：