Sunny-117 / js-challenges

✨✨✨ Challenge your JavaScript programming limits step by step

Home Page:https://juejin.cn/column/7244788137410560055

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 "1", "2", "3";

Sunny-117 opened this issue · comments

设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 "1", "2", "3";
commented

题目:

 new Quene()
        .task(1000, () => {
            console.log(1)
        })
        .task(2000, () => {
            console.log(2)
        })
        .task(1000, () => {
            console.log(3)
        })
        .start()

function Quene() { ... } //补全代码

实现:

function Queue() {
  this.quene = [];
}


Queue.prototype.task = function (time, callback) {
  this.quene.push({ time, callback });
  return this;
};

Queue.prototype.start = function () {
  const quene = this.quene;
  let result = Promise.resolve();

  quene.forEach((item) => {
    result = result.then(() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(item.callback());
        }, item.time);
      });
    });
  });

  return result;
};

//test
new Queue()
  .task(1000, () => {
    console.log(1)
  })
  .task(2000, () => {
    console.log(2)
  })
  .task(1000, () => {
    console.log(3)
  })
  .start()
   class TaskQueue {
      constructor() {
        this.queue = []
      }
      add(time, fn, ...args) {
        let p = () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(fn(...args))
            }, time);
          })
        }
        this.queue.push(p)
        return this
      }
      async execute() {
        let results = []
        while(this.queue.length) {
          await this.queue.shift()().then(res => results.push(res))
        }
        return results
      }
    }

    let q =new TaskQueue()
    console.log(q.add(1000, () => {
      console.log(1)
      return '1'
    }).add(2000, () => {
      console.log(2)
      return '2'
    }).add(1000, () => {
      console.log(3)
      return '3'
    }).execute().then(res => console.log(res)));
commented
class Quene {
  constructor() {
    this.queue = [];
  }

  task(time, cb) {
    this.queue.push(() => this.timeWait(time));
    this.queue.push(() => cb());
    return this;
  }
  timeWait(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
  }
  start() {
    setTimeout(async () => {
      for (const task of this.queue) {
        await task();
      }
    }, 0);
  }
}
// 设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 "1", "2", "3";
function Quene() { 
    const queue = []
    function task(delay, fn) {
        const promise = () => Promise.resolve().then(() => 
            new Promise((res) => 
                setTimeout(() => {
                    fn()
                    res()
                }, delay)
            )
        )
        queue.push(promise)
        return this
    }
    async function start() {
        for(let task of queue) {
            await task()
        }
    }
    return {
        task: task,
        start: start
    }
}

new Quene()
.task(1000, () => {
    console.log(1)
})
.task(2000, () => {
    console.log(2)
})
.task(1000, () => {
    console.log(3)
})
.start()
new Quene()
  .task(1000, () => {
    console.log(1);
  })
  .task(2000, () => {
    console.log(2);
  })
  .task(1000, () => {
    console.log(3);
  })
  .start();

function Quene() {
  const queue = []
  this.task = function(timeout, callback) {
    function callbackWrapper() {
      return new Promise((resolve) => {
        setTimeout(() => {
          callback()
          resolve()
        }, timeout)
      })
    }
    queue.push(callbackWrapper)
    return this
  }

  this.start = async function() {
    while(queue.length) {
      const task = queue.shift()
      await task()
    }
    
  }
}

/**
 *  new Quene()
 *         .task(1000, () => {
 *             console.log(1)
 *         })
 *         .task(2000, () => {
 *             console.log(2)
 *         })
 *         .task(1000, () => {
 *             console.log(3)
 *         })
 *         .start()
 *
 * function Quene() { ... } //补全代码
 */

// 定义task代码,task将调用的信息push到quene中
Quene.prototype.task = function (time, callback) {
  this.quene.push({ time, callback })
  // 将Quene的实例返回出来,后面的task才可以调用
  return this
}

// 定义start代码
Quene.prototype.start = async function () {
  for (let i = 0; i < this.quene.length; i++) {
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, this.quene[i].time)
    }).then(() => {
      this.quene[i].callback()
    })
  }
}


new Quene()
.task(1000, () => {
  console.log(1)
})
.task(2000, () => {
  console.log(2)
})
.task(1000, () => {
  console.log(3)
})
.start()

function Quene () {
  this.quene = []
}