实现一个 task 函数，支持 task().eat().sleep(2000).eat().sleep(2000)  #7

Activity

1. CodeRookie262

   added

   javascript

   on Dec 23, 2020
2. CodeRookie262 commented on Dec 24, 2020

   

   CodeRookie262

   on Dec 24, 2020

   OwnerAuthor

   More actions

   task().eat().sleep(2000).eat().sleep(2000);

   第一眼看上去会让人觉得和 Promise 一样，不经就会从 Promise 的角度进行思考。

   解法一：基于 Promise 进行封装

   function task() {
     class Task extends Promise {
       eat(arg) {
         return this.then(() => {
           if (arg instanceof Function) {
             arg();
           } else {
             console.log(arg || 'eat');
           }
           return Task.resolve();
         });
       }
       sleep(time) {
         return new Task(resolve => {
           const timer = setTimeout(() => {
             resolve();
             clearTimeout(timer);
           }, time);
         });
       }
     }
   
     return new Task(r => r(true));
   }

   解法二：采用定时器进行回调执行管控

   const task = function () {
     class Task {
       constructor() {
         this.runCallback = null;
         this.lazy = 0;
       }
   
       eat(arg) {
         this.runCallback = function () {
           if (arg instanceof Function) {
             arg();
           }
           console.log('eat');
         };
         if (!this.lazy) this.runCallback();
         return this;
       }
   
       sleep(time = 0) {
         let instance = new Task();
         instance.lazy = this.lazy + time;
         const timer = setTimeout(() => {
           instance.runCallback && instance.runCallback();
           clearTimeout(timer);
           instance.time = 0;
         }, instance.lazy);
         return instance;
       }
     }
   
     return new Task();
   };

   尝试用 任务队列 进行回调管控

   const task = function () {
     class Task {
       constructor() {
         // 任务队列
         this.list = [];
         // 队列开关，检测队列是否有函数未执行完成 如异步函数
         this.flag = false;
       }
       // eat 函数
       eat(arg) {
         // 包装函数
         const fun = function () {
           console.log('eat');
           if (arg instanceof Function) arg();
         };
         // 将包装函数推进队列中
         this.list.push(fun);
         // 执行队列
         return this.run();
       }
       // sleep 函数
       sleep(time) {
         let context = this;
         const fun = function () {
           context.flag = true;
           const timer = setTimeout(function () {
             context.flag = false;
             clearTimeout(timer);
             context.run();
           }, time);
         };
   
         this.list.push(fun);
         // 提供链式调用
         return this.run();
       }
       // 执行队列
       run() {
         if (this.flag) return this;
         const fun = this.list.shift();
         if (fun instanceof Function) {
           fun();
           return this.run();
         }
         return this;
       }
     }
   
     return new Task();
   };