利用js實現(xiàn)可進行時間和工作調度的任務管理器

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

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

前言

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

// 實現(xiàn)一個 arrange 可以是函數(shù) / class，可以進行時間和工作調度
// [ > ... ] 表示調用函數(shù)后的打印內容
// 調用 arrange('William') 函數(shù)的時間加入一個任務，調用 execute() 的時候執(zhí)行任務
// arrange('William').execute();
// 執(zhí)行的時候輸出這句話
// > William is notified
// 除了已上方式，還可以通過 do('commit') 追加任務，在執(zhí)行
// 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 { }

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

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

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

設計思路

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

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

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

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

它又是鏈式調用，所以說除了 execute 函數(shù)以外，每一個函數(shù)調用的返回值都是 arrange 函數(shù)的返回值。

大致邏輯就是這樣，我們一點一點去做。

代碼實現(xiàn)

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

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

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

最后它返回自身（也就是包含四個方法的對象），以便于鏈式調用。

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

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

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

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

最后它也返回自身。

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

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

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

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

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

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

因為有些任務是異步的（比如等待時間），所以我們使用了 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();