dispatch（链式调用，延时执行）实现

更新了，在最后面有新的完整实现

前要

前几天看到一个小题目：

用 javascript 实现一个 dispatch 函数，可以根据不同的参数打印出不同的字符串，同时支持链式调用：
1. 当调用 println("a")时，可以直接打印出字符串"a"。

dispatch().println('a').exec()  
> "a"

2. 当调用 println("b") 方法时，可以打印出字符串"a"和"b"。

dispatch().println('a').println('b').exec()  
> "a"  
> "b"

3. 当调用 wait(n) 方法时，可以先等待 n 秒，然后再执行后面的操作。

dispatch().println('a').wait(3).println('b').exec()  
> "a"  
> 3秒后  
> "b"

4. 当调用 waitFirst(n) 方法时，所有操作延后，先等待 n 秒，。

dispatch().println('a').waitFirst(3).println('b').exec()  
> 3秒后  
> "a"  
> "b"

感觉挺有意思的，就拿过来做了一下，目前是能够实现上述案例，但我觉得不完整也不正确。

简单分析

链式调用，那么一般是对于一个函数，原型上添加println，wait等方法（手写js版本promise的原理），我这里用了类的写法，本质还是一样的。

链式调用，且需要延时执行，那么就很简单的想到了高阶函数和事件订阅（前端中间件和vue响应式的原理）

再接着，println自然就是添加到事件数组内。

exec()就是将事件队列取出执行

前面都很简单，容易想到，难一点的是延时执行函数。即在延时之后继续执行剩下的事件。

我想了几种解决方案：

async/await：最好想到的，通过generator的停止js脚本执行的方式来延时后继续往下执行链式调用，但由于async/await定义的函数返回的是promise，而我们返回的对象必须是this示例，而async外部的同步代码又会直接执行，因此async实现失败。
promise：通过promise的延时resolve来继续往下执行链式调用。resolve之后，通过then调用，和async一样，promise并不能改变后续同步代码的执行顺序
wait完成调用：也就是现在我写的方法，直接在wait函数内将当前事件队列全部执行，然后延时之后将通过链式调用添加的新的事件队列全部执行。而exec判断前面是否有延时的调用，没有则由exec进行事件队列执行。

我的简单完成示例

function dispatch() {
    class work {
        constructor() {
            // 任务队列
            this.arr = []
            this.timer = true
        }

        println(p) {
            this.arr.push(() => { console.log(p) })
            // 添加输出任务到队列
            return this
        }

        wait(time) {
            this.arr.forEach(v => v())
            // 当前队列全部执行
            this.arr = []
            this.timer = false
            setTimeout(() => {
                console.log("三秒后");
                this.arr.forEach(v => v())
                // 延时后执行剩下的队列
            }, time * 1000)
            return this
        }

        waitFirst(time) {
            this.timer = false
            setTimeout(() => {
                console.log("三秒后");
                this.arr.forEach(v => v())
            }, 3000)
            return this
        }
        exec() {
            if (this.timer) {
            // 若前面没有定时器，则由exec执行事件队列
                this.arr.forEach((v) => {
                    v()
                })
            }
            return new work()
        }
    }
}

dispatch().println('a').exec()
dispatch().println('a').wait(3).println('b').exec()
dispatch().println('a').waitFirst(3).println('b').exec()
dispatch().println('a').println('b').exec()

总结与不足

示例的输出顺序正确，但怎么说呢，我的代码更像是为了写出来而写的代码。

比如 wait(3).println('b').wait(3) 这样的链式调用并不能实现（虽然题目并没有要求，我也不清楚能不能实现），且通常来说，应该事件队列由exec来完成调用，而不是wait（怎么说呢，就是不够优雅）。

不知道小伙伴们有没有写过类似的代码或者有没有什么好的解决方案，可以评论区见。

更新

其实我上面这样实现也说了，就是一个矛盾点。就是由exec来执行做不到按照队列执行。那么很简单，就让exec变成异步执行就解决了。

function dispatch() {
    class Work {
        constructor() {
            // 任务队列
            this.arr = []
        }
        
        exec =()=>{
            Promise.resolve().then(()=>this.next())
        }
        
        next=()=>{
            let fn= this.arr.shift()
            fn && fn()
        }
        
        doWait=(time)=>{
            return ()=>{
                new Promise((resolve)=>{
                    setTimeout(()=>{
                        console.log(time+"秒后");
                        this.next()
                    })
                })
            }
        }

        println=(p)=> {
            const doPrintln=()=>{
                 return ()=>{
                     console.log(p)
                     this.next()
                 }
            }
            this.arr.push(doPrintln())
            return this
        }

        wait(time) {
            this.arr.push(doWait(time))
            return this
        }

        waitFirst(time) {
            // 将延时放到队首
            this.arr.unshift(doWait(time))
            return this
        }
    }
    
    return new Work()
}

dispatch().println('a').exec()
dispatch().println('a').wait(3).println('b').exec()
dispatch().println('a').waitFirst(3).println('b').exec()
dispatch().println('a').println('b').exec()

就是操作只是添加函数到队列，然后exeuc异步调用（在这题中其实不需要exeuc异步，因为exeuc本身就是最后调用），让异步任务执行完成后去执行next。

结语

本次的文章到这里就结束啦！♥♥♥读者大大们认为写的不错的话点个赞再走哦 ♥♥♥

每天一个知识点，每天都在进步！♥♥