一道Promise面试题

SedationH

问个面试题不知道怎么去写实现

u.console('breakfast')
  .setTimeout(3000)
  .console('lunch')
  .setTimeout(3000)
  .console('dinner')

实现u，可链式调用，通过setTimeout可以延迟输出。
（字节终面的一道题目，太菜了，不知道怎么搜索类似的问题

hsxfjames

这其实是手写 Promise 实现的简化版，建议借鉴其思路去实现（真的去手写一个 Promise 再套到我给的答案里也可以，但没必要）。

但是需要确认一点：上一次的 console 调用被这次的 setTimeout 延迟，还是下一次的被延迟？

假定是顺序执行，先给一个玩票性质的答案（因为借用了原生 Promise 实现）：

class U {
    #p: Promise<void> | null = null;

    #pendingCount = 0;

    #checkPending = () => {
        this.#pendingCount -= 1;
        if (!this.#pendingCount) {
            this.#p = null;
        }
    }

    #chainTask(fn: Function) {
        if (this.#p && this.#pendingCount > 0) {
            this.#p = this.#p.then(fn).then(this.#checkPending);
            this.#pendingCount += 1;
        } else {
            this.#p = new Promise((resolve, reject) => {
                try { fn(); resolve(); } catch (e) { reject(e); }
            });
        }
    }

    console(...args: any[]) {
        this.#chainTask(() => console.log(...args));
        return this;
    }

    setTimeout(time) {
        this.#chainTask(() => new Promise((resolve) => setTimeout(resolve, time)));
        return this;
    }
}

const u = new U();

用 ts 语法的原因是让面试官没法快速地直接放在浏览器跑。

课后习题：

请不使用 Promise 或 await 或 generator 实现它；
增加一个 .custom() 方法允许用户执行任意同步函数（考察点：异常处理）；
增加一个 .customAsync() 方法允许用户执行任意异步函数（考察点：异步转同步处理）；

SedationH

感谢 Miigon hsxfjames
😆

Miigon

关键技巧：
1 u中每个方法 return this，也就是返回u
2 ~~使用await，或者~~自己写个队列，实现顺序的等待执行

edit: 使用await行不通

Miigon

发一个自己的solution

class U {
    #taskQueue = []

    #next() {
        const fn = this.#taskQueue.shift();
        if(fn) fn();
    }

    #newTask(fn) {
        this.#taskQueue.push(() => { fn(); } );
        if(this.#taskQueue.length === 1) {
            setTimeout(this.#next.bind(this), 0);
        }
        return this;
    }

    console(...args) {
        this.#newTask(() => { console.log(...args); this.#next(); })
        return this;
    }
    
    setTimeout(timeout) {
        this.#newTask(() => { setTimeout(this.#next.bind(this), timeout); })
        return this;
    }
}

const u = new U();

u.console('a').setTimeout(3000).console('b').setTimeout(3000).console('c');

用了setTimeout(fn, 0)的技巧，将任务链的执行延迟到下个事件循环周期。
好处是不依赖promise了，坏处是执行延迟到下个事件循环周期，也就是这个代码：

u.console('a').setTimeout(3000).console('b').setTimeout(3000).console('c');
console.log("this message should appear after 'a'")

的输出是

this message should appear after 'a'
a
b
c

可能会导致一些运行顺序相关的坑
另一个不如promise的，因用的是宏任务队列，宏任务过多时可能会延迟比较久开始执行

Q：
1.setTimeout(this.#next.bind(this), 0)的作用和效果是什么？改成this.#next()为什么不行？
2.使用setTimeout(fn ,0)和使用 Promise 原理上的差异在哪里？
3.实现custom、customAsync