利用js实现可进行时间和工作调度的任务管理器
作者：子辰Web草庐
前言
前几天我们的同学在面试的时候提供了这样一道有趣的面试题，实现一个可进行时间和工作调度的任务管理器，具体题目如下，快来看看吧。
// 实现一个 arrange 可以是函数 / class，可以进行时间和工作调度
// [ > ... ] 表示调用函数后的打印内容
// 调用 arrange('William') 函数的时间加入一个任务，调用 execute() 的时候执行任务
// arrange('William').execute();
// 执行的时候输出这句话
// > William is notified
// 除了已上方式，还可以通过 do('commit') 追加任务，在执行
// arrange('William').do('commit').execute();
// 先输出添加的任务
// > William is notified
// 在输出追加的任务
// > Start to commit
// 还可以通过 wait(5) 在任务之间做间隔时间
// arrange('William').wait(5).do('commit').execute();
// 先输出添加的任务
// > William is notified
// 等待 5秒
// 在输出追加的任务
// > Start to commit
// 也可以通过 waitFirst(5) 在任务调用前设置等待时间
// arrange('William').waitFirst(5).do('push').execute();
// 等待 5秒
// 先输出添加的任务
// > William is notified
// 在输出追加的任务
// > Start to push
function arrange(taskId) {
// 此处写代码逻辑
}
// 或使用类组件，如果使用类组件，调用形式可以改为: new arrange(William'),execute();
class arrange { }任务管理器是一种可以让你对一系列的任务进行组织和执行的工具，它可以让你在添加任务、追加任务、设置任务间隔等方面有更多的自由度和灵活性。
比如，你可以用任务管理器来实现一个音乐播放器，一个文件上传器，一个数据采集器等等。
听起来很有用吧？那么我们就来看看具体的实现步骤吧。
设计思路
通过以上需求我们可以知道，我们需要一个数组来记录它的任务列表。
无论我们是调用 arrange()、do()、wait() 还是 waitFirst()，都不会做任何事情，而是会产生一个任务，把这个任务往数组里添加。
只有等到调用 execute() 的时候，才会真正的把这个数组里的任务依次拿出来执行。
并且我们可以看到，arrange() 的调用，返回的值可以调用 do()、wait() 、waitFirst()和 execute() 方法，也就是说 arrange 函数的返回值包含这些函数。
它又是链式调用，所以说除了 execute 函数以外，每一个函数调用的返回值都是 arrange 函数的返回值。
大致逻辑就是这样，我们一点一点去做。
代码实现
function arrange(taskId) {
// 创建一个空数组 tasks 来存储所有的任务
const tasks = [];
// 因为在调用 arrange() 的时候就是添加一个任务，并且任务可以被调用
// 也就是说任务就是一个函数，并且执行任务会输出 “任务名 + is notified” 格式的字符串
// 所以我们在调用时直接添加任务
tasks.push(() => {
console.log(`${taskId} is notified`);
});
// 声明四个方法
function execute() {}
function doSomething() {
// 因为 do 是保留字，所以换一个名字
}
function wait() {}
function waitFirst() {}
// 返回四个方法
return {
execute,
do: doSomething,
wait,
waitFirst,
};
}接下来我们实现这四个方法。首先是 doSomething 方法（ 因为 do 是保留字 ），它接受一个参数 something，表示要追加的任务名。
然后它把任务（ 也就是打印 Start to ${something}）推入数组中。
最后它返回自身（ 也就是包含四个方法的对象 ），以便于链式调用。
function doSomething(something) {
tasks.push(() => {
console.log(`Start to ${something}`);
});
return this;
}然后是 wait 方法，它接受一个参数 duration，表示要等待的时间（ 单位为秒 ）。
然后它把任务（ 也就是等待一段时间 ）推入数组中。
这里我们使用了 Promise 来实现异步操作，在指定时间后 resolve 这个 Promise。
最后它也返回自身。
function wait(duration) {
tasks.push(
() =>
new Promise((resolve) => {
setTimeout(resolve, duration * 1000);
})
);
return this;
}接着是 waitFirst 方法，它跟 wait 方法类似，只不过它把等待时间作为第一个任务插入到数组中。
所以我们使用了数组的 unshift 方法来实现。
function waitFirst(duration) {
tasks.unshift(
() =>
new Promise((resolve) => {
setTimeout(resolve, duration * 1000);
})
);
return this;
}最后是 execute 方法，它没有参数，也没有返回值。
它负责遍历数组中所有的任务，并依次执行它们。
因为有些任务是异步的（比如等待时间），所以我们使用了 async/await 的语法来保证执行顺序。
async function execute() {
for (const t of tasks) {
await t();
}
}至此我们已经完成了所有代码。
完整代码如下：
function arrange(taskId) {
const tasks = [];
tasks.push(() => {
console.log(`${taskId} is notified`);
});
async function execute() {
for (const t of tasks) {
await t();
}
}
function doSomething(something) {
tasks.push(() => {
console.log(`Start to ${something}`);
});
return this;
}
function wait(duration) {
tasks.push(
() =>
new Promise((resolve) => {
setTimeout(resolve, duration * 1000);
})
);
return this;
}
function waitFirst(duration) {
tasks.unshift(
() =>
new Promise((resolve) => {
setTimeout(resolve, duration * 1000);
})
);
return this;
}
return {
execute,
do: doSomething,
wait,
waitFirst,
};
}
arrange("Tom").wait(2).do("abc").do("bcd").execute();
可以看到，任务的执行已经按照我们的预期完成啦。
总结
通过这篇文章，我们学习了如何实现一个可进行时间和工作调度的任务管理器，它可以让我们对一系列的任务进行组织和执行，让我们的代码更加智能和高效。
我们主要利用了链式调用和异步编程的方式，以及 Promise 和 async/await 的语法，来实现同步和异步的任务调度。
这是一个很好的面试题，也是一个很有用的技能。
在未来的开发中，类似这样的任务调度器会经常用到，特别是在需要按照一定顺序执行一系列异步操作的场景下，比如批量上传文件、批量下载数据等。
掌握了这种任务调度器的实现方式，我们可以更加高效地完成复杂的异步编程任务，提升我们的开发效率和代码质量。
到此这篇关于利用js实现可进行时间和工作调度的任务管理器的文章就介绍到这了,更多相关js任务管理器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！