JS异步任务的并行、串行及二者结合用法

function f1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('1结束');
            resolve();
        }, 1000)
    });
}
function f2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('2结束');
            resolve();
        }, 900)
    });
}
function f3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('3结束');
            resolve();
        }, 800)
    });
}

let arr = [f1, f2, f3];
Promise.all(arr.map(i => i()));
// 3结束
// 2结束
// 1结束

// forEach遍历
arr.forEach(item => {
    item();
});
// for循环
for (let i = 0; i < arr.length; i++) {
    arr[i]();
}
// for...of遍历
for (let item of arr) {
    item();
}

// 注意，以下两种写法同样是并行的
arr.forEach(async item => await item());

async function f() {
    arr.forEach(async item => await item())
}
f();

Promise.allSettled(arr.map(i => i()));

async function serial(arr) {
    let item = arr.shift();

    await item();
    if (arr.length > 0) {
        await serial(arr);
    }
}
serial(arr);
// 1结束
// 2结束
// 3结束

// 使用for...of
async function f() {
    for (let item of arr) {
        await item();
    }
}
f();

// 使用for循环
async function f() {
    for (let i = 0; i < arr.length; i++) {
        await arr[i]();
    }
}
f();

async function bingChuan(arr, num) {
    let items = arr.splice(0, num);
    
    await Promise.all(items.map(i => i()));
    if (arr.length > 0) {
        await bingChuan(arr, num);
    }
}
bingChuan(arr, 2);
// 2结束
// 1结束
// 3结束