4、异步 demo

红绿灯函数

const task = (timer, type) =>
	new Promise((resolve) => {
		setTimeout(() => {
			console.log(type);
			resolve();
		}, timer);
	});

const step = async () => {
	await task(3000, "red");
	await task(2000, "green");
	await task(1000, "yellow");
	step();
};

step();

并发数量控制函数

// 需要异步输出的元素
const idList = [
	{ id: 1, time: 7222 },
	{ id: 2, time: 5553 },
	{ id: 3, time: 3243 },
	{ id: 4, time: 5215 },
	{ id: 5, time: 3323 },
	{ id: 6, time: 7777 },
	{ id: 7, time: 2222 },
];

// 异步执行函数
function loadSource({ time, id }) {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve(id);
		}, time);
	});
}

// 并发控制函数
function loadLimit(idList, load, limit) {
	// 拷贝数组，后续要对数组做修改，防止修改原数组
	const list = idList.slice();

	// 小于等于限制条件直接返回
	if (list.length <= limit) {
		const promiseArr = list.map((item) => load(item));
		return Promise.all(promiseArr);
	}

	// 切割数组发起请求
	const promiseArr = list.splice(0, limit).map((item) => {
		return { id: item.id, promiser: load(item) };
	});

	const begin = (idListItem) => {
		// 没有需要执行的元素则结束递归
		if (!promiseArr.length) return;
		const nowArr = promiseArr.map((item) => item.promiser);
		return Promise.race(nowArr).then((finishId) => {
			// 输出元素
			console.log(finishId);
			// 找到完成加载的元素在数组中的位置，将这个元素删除
			let finishIdPosition = promiseArr.findIndex((promiser) => {
				return finishId === promiser.id;
			});
			promiseArr.splice(finishIdPosition, 1);
			// 删除一个元素后添加下一个元素进入数组
			if (idListItem) {
				promiseArr.push({ id: idListItem.id, promiser: load(idListItem) });
			}
			// 递归执行，如果还有没入队的元素则入队，没有了则直接执行
			if (list.length > 0) {
				begin(list.shift());
			} else {
				begin();
			}
		});
	};
	begin(list.shift());
}

loadLimit(idList, loadSource, 3);

异步队列控制函数

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const subFlow = createFlow([() => delay(2000).then(() => log("c"))]);
const log = (a) => {
	console.log(a);
};

// 要求顺序输出并执行delay延迟
createFlow([
	() => log("a"),
	() => log("b"),
	subFlow,
	[() => delay(2000).then(() => log("d")), () => log("e")],
]).run(() => {
	console.log("done");
});

// promise链实现
function createFlow(arr) {
	// 参数会有嵌套的情况，铺平参数为一维数组
	const runArr = arr.slice().flat(Infinity);
	// createFlow方法并不会输出，执行run方法的时候才会真正输出
	// 每次都返回then方法，会让整个reduce过程变成 Promise.then(task1).then(task2).then(task3) 的形式
	const run = (cb) => {
		// 拼接run传入的回调函数，执行reduce方法
		return runArr.concat(cb).reduce((prev, cur) => {
			// 当前值如果是个嵌套的createFlow，则执行当前值的run方法
			// 返回一个新的promise，成为下次reduce的prev
			if (cur && cur.isFlow) {
				return prev.then(cur.run);
			}
			// 普通函数则直接执行，返回一个新的promise，成为下次reduce的prev
			return prev.then(cur);
			// Promise.resolve()作为初始值启动reduce
		}, Promise.resolve());
	};

	// 返回flow对象
	return {
		isFlow: true,
		run,
	};
}

// async await实现
function createFlow(arr) {
	const runArr = arr.slice().flat(Infinity);
	const run = async (cb) => {
		for (let i = 0; i < runArr.length; i++) {
			if (runArr[i] && runArr[i].isFlow) {
				await runArr[i].run();
			} else {
				await runArr[i]();
			}
		}
		cb && cb();
	};

	return {
		isFlow: true,
		run,
	};
}