快捷導(dǎo)航

利用js實(shí)現(xiàn)可進(jìn)行時間和工作調(diào)度的任務(wù)管理器

更新時間：2023年10月08日 10:09:21 作者：子辰Web草廬

這篇文章主要為大家詳細(xì)介紹了如何利用js實(shí)現(xiàn)一個可進(jìn)行時間和工作調(diào)度的任務(wù)管理器,文中的示例代碼簡潔易懂,有需要的小伙伴可以參考一下

前言

前幾天我們的同學(xué)在面試的時候提供了這樣一道有趣的面試題，實(shí)現(xiàn)一個可進(jìn)行時間和工作調(diào)度的任務(wù)管理器，具體題目如下，快來看看吧。

// 實(shí)現(xiàn)一個 arrange 可以是函數(shù) / class，可以進(jìn)行時間和工作調(diào)度
// [ > ... ] 表示調(diào)用函數(shù)后的打印內(nèi)容
// 調(diào)用 arrange('William') 函數(shù)的時間加入一個任務(wù)，調(diào)用 execute() 的時候執(zhí)行任務(wù)
// arrange('William').execute();
// 執(zhí)行的時候輸出這句話
// > William is notified
// 除了已上方式，還可以通過 do('commit') 追加任務(wù)，在執(zhí)行
// arrange('William').do('commit').execute();
// 先輸出添加的任務(wù)
// > William is notified
// 在輸出追加的任務(wù)
// > Start to commit
// 還可以通過 wait(5) 在任務(wù)之間做間隔時間
// arrange('William').wait(5).do('commit').execute();
// 先輸出添加的任務(wù)
// > William is notified
// 等待 5秒
// 在輸出追加的任務(wù)
// > Start to commit
// 也可以通過 waitFirst(5) 在任務(wù)調(diào)用前設(shè)置等待時間
// arrange('William').waitFirst(5).do('push').execute();
// 等待 5秒
// 先輸出添加的任務(wù)
// > William is notified
// 在輸出追加的任務(wù)
// > Start to push
function arrange(taskId) {
  // 此處寫代碼邏輯
}
// 或使用類組件，如果使用類組件，調(diào)用形式可以改為: new arrange(William'),execute();
class arrange { }

任務(wù)管理器是一種可以讓你對一系列的任務(wù)進(jìn)行組織和執(zhí)行的工具，它可以讓你在添加任務(wù)、追加任務(wù)、設(shè)置任務(wù)間隔等方面有更多的自由度和靈活性。

比如，你可以用任務(wù)管理器來實(shí)現(xiàn)一個音樂播放器，一個文件上傳器，一個數(shù)據(jù)采集器等等。

聽起來很有用吧？那么我們就來看看具體的實(shí)現(xiàn)步驟吧。

設(shè)計思路

通過以上需求我們可以知道，我們需要一個數(shù)組來記錄它的任務(wù)列表。

無論我們是調(diào)用 arrange()、do()、wait() 還是 waitFirst()，都不會做任何事情，而是會產(chǎn)生一個任務(wù)，把這個任務(wù)往數(shù)組里添加。

只有等到調(diào)用 execute() 的時候，才會真正的把這個數(shù)組里的任務(wù)依次拿出來執(zhí)行。

并且我們可以看到，arrange() 的調(diào)用，返回的值可以調(diào)用 do()、wait() 、waitFirst()和 execute() 方法，也就是說 arrange 函數(shù)的返回值包含這些函數(shù)。

它又是鏈?zhǔn)秸{(diào)用，所以說除了 execute 函數(shù)以外，每一個函數(shù)調(diào)用的返回值都是 arrange 函數(shù)的返回值。

大致邏輯就是這樣，我們一點(diǎn)一點(diǎn)去做。

代碼實(shí)現(xiàn)

function arrange(taskId) {
  // 創(chuàng)建一個空數(shù)組 tasks 來存儲所有的任務(wù)
  const tasks = [];
  // 因為在調(diào)用 arrange() 的時候就是添加一個任務(wù)，并且任務(wù)可以被調(diào)用
  // 也就是說任務(wù)就是一個函數(shù)，并且執(zhí)行任務(wù)會輸出 “任務(wù)名 + is notified” 格式的字符串
  // 所以我們在調(diào)用時直接添加任務(wù)
  tasks.push(() => {
    console.log(`${taskId} is notified`);
  });
  // 聲明四個方法
  function execute() {}
  function doSomething() {
    // 因為 do 是保留字，所以換一個名字
  }
  function wait() {}
  function waitFirst() {}
  // 返回四個方法
  return {
    execute,
    do: doSomething,
    wait,
    waitFirst,
  };
}

接下來我們實(shí)現(xiàn)這四個方法。首先是 doSomething 方法（因為 do 是保留字），它接受一個參數(shù) something，表示要追加的任務(wù)名。

然后它把任務(wù)（也就是打印 Start to ${something}）推入數(shù)組中。

最后它返回自身（也就是包含四個方法的對象），以便于鏈?zhǔn)秸{(diào)用。

function doSomething(something) {
  tasks.push(() => {
    console.log(`Start to ${something}`);
  });
  return this;
}

然后是 wait 方法，它接受一個參數(shù) duration，表示要等待的時間（單位為秒）。

然后它把任務(wù)（也就是等待一段時間）推入數(shù)組中。

這里我們使用了 Promise 來實(shí)現(xiàn)異步操作，在指定時間后 resolve 這個 Promise。

最后它也返回自身。

function wait(duration) {
  tasks.push(
    () =>
      new Promise((resolve) => {
        setTimeout(resolve, duration * 1000);
      })
  );
  return this;
}

接著是 waitFirst 方法，它跟 wait 方法類似，只不過它把等待時間作為第一個任務(wù)插入到數(shù)組中。

所以我們使用了數(shù)組的 unshift 方法來實(shí)現(xiàn)。

function waitFirst(duration) {
  tasks.unshift(
    () =>
      new Promise((resolve) => {
        setTimeout(resolve, duration * 1000);
      })
  );
  return this;
}

最后是 execute 方法，它沒有參數(shù)，也沒有返回值。

它負(fù)責(zé)遍歷數(shù)組中所有的任務(wù)，并依次執(zhí)行它們。

因為有些任務(wù)是異步的（比如等待時間），所以我們使用了 async/await 的語法來保證執(zhí)行順序。

async function execute() {
  for (const t of tasks) {
    await t();
  }
}

至此我們已經(jīng)完成了所有代碼。

完整代碼如下：

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();