利用js实现可进行时间和工作调度的任务管理器

 更新时间:2023年10月08日 10:09:21   作者:子辰Web草庐  
这篇文章主要为大家详细介绍了如何利用js实现一个可进行时间和工作调度的任务管理器,文中的示例代码简洁易懂,有需要的小伙伴可以参考一下

前言

前几天我们的同学在面试的时候提供了这样一道有趣的面试题,实现一个可进行时间和工作调度的任务管理器,具体题目如下,快来看看吧。

// 实现一个 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任务管理器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • BootStrap初学者对弹出框和进度条的使用感觉

    BootStrap初学者对弹出框和进度条的使用感觉

    这篇文章主要介绍了BootStrap初学者对弹出框和进度条的使用感觉的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Bootstrap table简单使用总结

    Bootstrap table简单使用总结

    这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS动态添加元素及绑定事件造成程序重复执行解决

    JS动态添加元素及绑定事件造成程序重复执行解决

    这篇文章主要给大家介绍了关于JS动态添加元素及绑定事件造成程序重复执行的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • 关于原生js中bind函数的简单实现

    关于原生js中bind函数的简单实现

    下面小编就为大家带来一篇关于原生js中bind函数的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js版本A*寻路算法

    js版本A*寻路算法

    js版本A*寻路算法...
    2006-12-12
  • JavaScript日期和时间的格式化及其它常用处理方法

    JavaScript日期和时间的格式化及其它常用处理方法

    这篇文章主要给大家介绍了关于JavaScript日期和时间的格式化及其它常用处理方法,JavaScript中可以使用Date对象来表示日期和时间,如果需要格式化日期和时间,可以使用Date对象的几个方法和一些字符串操作方法来实现,需要的朋友可以参考下
    2023-09-09
  • 基于javascript实现碰撞检测

    基于javascript实现碰撞检测

    这篇文章主要为大家详细介绍了基于javascript实现碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 前端实现HTML网页转PDF并导出

    前端实现HTML网页转PDF并导出

    这篇文章主要为大家详细介绍了前端如何通过html2canvas和jsPDF实现HTML网页转PDF并导出,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2025-01-01
  • JS组件系列之JS组件封装过程详解

    JS组件系列之JS组件封装过程详解

    JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,接下来通过本文给大家分享JS组件系列之JS组件封装过程详解,需要的朋友参考下吧
    2017-04-04
  • JavaScript实现sleep睡眠函数的几种简单方法总结

    JavaScript实现sleep睡眠函数的几种简单方法总结

    sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果,下面这篇文章主要给大家介绍了关于JavaScript实现sleep睡眠函数的几种简单方法总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01

最新评论