本质
- 将异步函数放到一个队列中按顺序的执行
- 待更新
关于本质的第一点,可以先看我写的这个demo
// 这个函数是vue-router实现路由守卫顺序调用的核心函数
function runQueue(queue, fn, cb) {
const step = (index) => {
if (index > queue.length) {
cb();
} else {
if (queue[index]) {
fn(queue[index], () => {
// fn执行完成之后,会调用这个next回调函数
// 这也就是为什么路由守卫里边强调一定要手动使用next(),为的就是能执行到下一个要调用的守卫钩子函数
step(index + 1);
});
} else {
step(index + 1);
}
}
};
step(0);
}
function f1(next) {
setTimeout(() => {
console.log("i am f1");
next();
}, 5000);
}
function f2(next) {
setTimeout(() => {
console.log("i am f2");
next();
}, 3000);
}
function f3(next) {
setTimeout(() => {
console.log("i am f3");
}, 2000);
}
const queue = [f1, f2, f3];
runQueue(
queue,
(item, next) => {
// 钩子函数就是通过这样拿到next函数
item(next);
},
() => {
console.log("队列执行完毕");
}
);