任务队列的中断与恢复

这是一个相对常见的面试题，不仅限于前端面试中

// 依次顺序执行一系列任务
// 所有任务完成可以得到每个任务的执行结果
// 需要返回两个方法，start启动任务，pause暂停任务
// 每个任务具有原子性，不可在任务中中断
// @param {...Function} tasks
function processTasks<T>(...tasks: (() => Promise<T>)[]) {
	return {
		start() {},
		pause() {}
	}
}

第一步 顺序执行

function processTasks<T>(...tasks: (() => Promise<T>)[]) {
	let index = 0
	return {
		async start() {
			while (index < tasks.length - 1) {
				await tasks[index]()
			}
		},
		pause() {
		}
	}
}

这里利用一个 while循环来完成tasks的遍历执行。

第二步 完成后返回结果

function processTasks<T>(...tasks: (() => Promise<T>)[]) {
	let index = 0
	let results: T[] = []
	return {
		start() {
			return new Promise<T[]>(async (resolve) => {
				while (index < tasks.length) {
					const res = await tasks[index]()
					results.push(res)
					index++
				}
				resolve(results)
			})
		},
		pause() {}
	}
}

声明一个 results用于接收所有任务的结果返回，并作为返回值包裹在 Promise的 resolve中。

第三步 启动任务和暂停任务（完成）

// 依次顺序执行一系列任务
// 所有任务完成可以得到每个任务的执行结果
// 需要返回两个方法，start启动任务，pause暂停任务
// 每个任务具有原子性，不可在任务中中断
// @param {...Function} tasks
function processTasks<T>(...tasks: (() => Promise<T>)[]) {
	let running = false
	let index = 0
	let results: T[] = []
	return {
		start() {
			return new Promise<T[]>(async (resolve) => {
				if (running) resolve([])
				running = true
				while (index < tasks.length) {
					const res = await tasks[index]()
					results.push(res)
					index++
					if (!running) return
				}
				running = false
				resolve(results)
			})
		},
		pause() {
			running = false
		}
	}
}

新增状态值 running，利用状态值来控制如何在当前进行任务结束后暂停队列。