用一道題目來驗證你的JS功底,真香～

鼠年的春節只有三個字'宅～宅～宅'，宅來無事想起以前碰到的一個JS題目，感受仍是蠻有趣的，放出來你們一塊兒思考下～

首先咱們說一下題目（需求來了，面對疾風吧～）

/** * 請寫出兩種或兩種以上實現方法知足: execute 對應的id按順序打印 * PS: 嘗試只修改start函數體 * * 輸出結果參考: * id 0 * id 1 * id 2 * id 3 * id 4 */

function start(id) {
  execute(id).catch(console.error);
}

// 測試代碼 (請勿更改):

for (let i = 0; i < 5; i++) {
  start(i);
}

function sleep() {
  const duration = Math.floor(Math.random() * 500);
  return new Promise(resolve => setTimeout(resolve, duration));
}

function execute(id) {
  return sleep().then(() => {
    console.log("id", id);
  });
}

複製代碼

看到這個題目你們能夠思考30s，想想怎麼去解這道題目，有興趣的能夠直接拷貝題目到一個順手的編輯器裏嘗試寫一寫，對於程序猿來講思考的過程仍是很重要的

---

下面開始寫答案了哦～ 固然了，只是個人解題方案，你們有什麼更好的方案也但願能夠在評論區不吝賜教，也能夠掃碼添加文末二維碼在微信羣進行交流。準備好了嗎？Baby～

如下答案只會放start函數體的更改，畢竟咱們的題幹只要求更改start函數體

答案一

此方案能夠實現，可是每次調用start函數，都會清除timer，致使只有全部的調用都push完纔會真正執行execute函數，代碼也不優雅，算是勉強能夠實現功能

function start(id) {
  if (!this.processList) this.processList = [];
  this.processList.push({ id });
  clearTimeout(this.t);
  this.t = setTimeout(() => {
    (async () => {
      let target = this.processList.shift();
      while (target) {
        await execute(target.id);
        target = this.processList.shift();
      }
    })();
  }, 0);
}
複製代碼

做爲一個有追求的FEer怎麼能夠僅僅停留在方案一呢，思考～～～

答案二

通過苦苦思索，終於打通任督二脈寫出了我的認爲最優雅的實現方案，這個方案不須要藉助定時器，思路就是Promise的鏈式調用即then函數

function start(id) {
  this.promises = !this.promises
    ? execute(id)
    : this.promises.then(() => execute(id));
}
複製代碼

到此，解題告一段落，整個解題過程仍是痛苦的，可是解題完畢仍是蠻有成就感的～

對前端技術交流有興趣的同窗，能夠加入下面的前端開發者羣，方便你們交流前端技術

本文爲原創文章，僅做我的存檔所用，請勿隨意轉載。如確有轉載需求，請在轉載時務必帶上原文連接！碼字不易，多謝合做！