进阶技巧🕴️ 中断和恢复任务序列

2023-09-25 | 2023-12-13 | 537 | 2 分钟

题目

依次顺序执行一系列任务，所有任务全部完成后可以得到每个任务的执行结果；
需要返回两个方法，start 用于启动任务，pause 用于暂停任务；
每个任务具有原子性，只能在两个任务之间中断；

解答

processTasks.js

/**
 * 依次顺序执行一系列任务
* 所有任务全部完成后可以得到每个任务的执行结果
* 需要返回两个方法，start用于启动任务，pause用于暂停任务
* 每个任务具有原子性，只能在两个任务之间中断
* @param  {...Function} task 任务列表，每个任务无参、异步
* @returns 
*/
function processTasks(...task) {
    let isRunning = false; // 运行状态
    let i = 0; // 任务索引
    const result = []; // 任务队列结果
    let promise = null; // 记录任务队列状态
    return {
        start() {
            return new Promise(async (resolve, reject) => {
                // promise 有值说明，任务全部执行完或者报错了
                if (promise) {
                    promise.then(resolve, reject);
                }

                // 正在运行则停止，有可能多次执行
                if (isRunning) {
                    return;
                }

                isRunning = true;
                while (i < task.length) {
                    try {
                        console.log(i + '执行中');
                        result.push(await task[i]());
                        console.log(i + '执行完成');
                        i++;
                    } catch (error) {
                        isRunning = false;
                        reject(error);
                        promise = Promise.reject(error);
                        return;
                    }

                    if (!isRunning && i < task.length - 1) {
                        console.log('执行中断');
                        // 中断
                        return;
                    }
                }

                isRunning = false;
                resolve(result);
                promise = Promise.resolve(result);
            })
        },
        pause() {
            isRunning = false;
        },
    };
}

index.html

<!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>
    <button id="begin">启动</button>
    <button id="pause">暂停</button>
    <script src="./processTasks.js"></script>
    <script>
        const tasks = [];
        for (let index = 0; index < 5; index++) {
            tasks.push(() =>
                new Promise((resolve) => {
                    setTimeout(() => { resolve(`任务${index}`) }, 2000);
                })
            );
        }
        const processor = processTasks(...tasks);

        begin.onclick = async () => {
            console.log('点击开始');
            const result = await processor.start();
            console.log('任务执行完成' + result);
        };
        pause.onclick = () => {
            console.log('暂停');
            processor.pause();
        };

    </script>
</body>

</html>

打赏作者

您的打赏是我前进的动力

微信

支付宝

进阶技巧🕴️ 消除异步的传染性

进阶技巧🕴️ 脚本加载失败怎么办

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 题目
2. 解答