<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var files = [];
// 初始化待上传的文件
function initFiles() {
files = [
{ name: 'file1', res: '' },
{ name: 'file2', res: '' },
{ name: 'file3', res: '' },
{ name: 'file4', res: '' },
{ name: 'file5', res: '' },
];
}
// 单文件上传方法，返回Promise
function upload(file) {
console.log('upload start => ', file);
return new Promise(function(resolve, reject) {
setTimeout(() => {
file.res = 'success';
console.log('upload finish => ', file);
resolve();
}, 1000);
});
}
// 单线程上传
async function uploadAll1() {
for (var i=0; i<files.length; i++) {
var file = files[i];
await upload(file);
}
}
// 多线程上传
async function uploadAll2() {
var tasks = [];
files.forEach(o => {
tasks.push(upload(o));
});
await Promise.all(tasks);
}
// 测试方法
window.onload = async function() {
console.log(`执行单线程上传开始`);
const start1 = Date.Now();
initFiles();
await uploadAll1();
const end1 = Date.Now();
console.log(`执行单线程上传结束，耗时：${(end1 - start1) / 1000}秒，数据：`, files);
console.log(`执行多线程上传开始`);
const start2 = Date.Now();
initFiles();
await uploadAll2();
const end2 = Date.Now();
console.log(`执行多线程上传结束，耗时：${(end2 - start2) / 1000}秒，数据：`, files);
}
</script>
</body>
</html>
控制台输出：
执行单线程上传开始 upload start => {name: "file1", res: ""} upload finish => {name: "file1", res: "success"} upload start => {name: "file2", res: ""} upload finish => {name: "file2", res: "success"} upload start => {name: "file3", res: ""} upload finish => {name: "file3", res: "success"} upload start => {name: "file4", res: ""} upload finish => {name: "file4", res: "success"} upload start => {name: "file5", res: ""} upload finish => {name: "file5", res: "success"} 执行单线程上传结束，耗时：5.059秒，数据： (5) [{…}, {…}, {…}, {…}, {…}] 执行多线程上传开始 upload start => {name: "file1", res: ""} upload start => {name: "file2", res: ""} upload start => {name: "file3", res: ""} upload start => {name: "file4", res: ""} upload start => {name: "file5", res: ""} upload finish => {name: "file1", res: "success"} upload finish => {name: "file2", res: "success"} upload finish => {name: "file3", res: "success"} upload finish => {name: "file4", res: "success"} upload finish => {name: "file5", res: "success"} 执行多线程上传结束，耗时：1.003秒，数据： (5) [{…}, {…}, {…}, {…}, {…}]
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
