返回专题

专题 2018

LazyMan

LazyMan 相关笔记

JavaScript面试题
  • 方法一: 使用 Promise.resolve 的自执行原理

    JavaScript
    class LazyMan {
      constructor() {
        this.queue = Promise.resolve();
      }
      sleep(timer) {
        this.queue = this.queue.then(() => {
          return new Promise(resolve => {
            console.log('sleeping,wait:' + timer + 's');
            setTimeout(() => {
              resolve();
            }, timer * 1000);
          });
        });
        return this;
      }
      eat(fruit) {
        this.queue = this.queue.then(() => {
          return new Promise(resolve => {
            console.log('eat:' + fruit);
            resolve();
          });
        });
        return this;
      }
    }
    let person = new LazyMan();
    person
      .sleep(3)
      .eat('banana')
      .sleep(5)
      .eat('peach');
    
  • 方法二: 使用自己封装的自执行

    JavaScript
    class Person {
      constructor() {
        this.queue = [];
        setTimeout(() => {
          this.next();
        }, 0);
      }
      sleep(timer) {
        return this.subscribe(() => {
          return new Promise(resolve => {
            console.log('sleeping,wait:' + timer + 's');
            setTimeout(() => {
              resolve();
            }, timer * 1000);
          });
        });
      }
      eat(fruit) {
        return this.subscribe(() => {
          console.log('eat' + fruit);
        });
      }
      subscribe(fn) {
        this.queue.push(async () => {
          try {
            fn && (await fn());
          } catch (error) {
            console.error('方法执行失败', { fn, error });
          }
          this.next();
        });
        return this;
      }
      next() {
        const fn = this.queue.pop();
        fn && fn();
      }
    }
    let person = new Person();
    person
      .sleep(3)
      .eat('banana')
      .sleep(5)
      .eat('peach');
    
返回首页
上一篇Koa middleware(koa-compose)下一篇React Component 分类 Demo

Discussion

留言与讨论

想法、补充和不同意见都欢迎。