2

lazyMan链式调用

 LazyMan('Tony').eat('lunch').sleep(10).eat('dinner')
// Hi i am Tony
// 等待了10秒
// I am eating lunc

请实现一个这样的东西。

第一反应,这不是链式调用吗,我们常用的jquery就是这样的啊。

仔细一看,中间那个sleep好像不太好弄。

怎么样才能让他10秒后才执行下面的东东嘞??

那就先写出个大概样子

const LazyMan = function(name){

    console.log(`Hi i am ${name}`);

    let _lazyMan = {
        sleep: function(time){

            return this
        },
        eat: function(food){
            return this
        },
    }

    return _lazyMan;
} 

首先是一个函数,然后返回一个对象,里面有sleep方法和eat方法,并且能够返回对象自身

那我们怎么让他执行sleep的时候延迟,然后执行链式后面的函数呢?

第一反应

sleep执行之后,马上就会执行eat,这样的话,就让sleep 函数内部setTimeout,然后执行打印时间,然后执行eat函数不就行了吗,
如果只是满足链条长度为3,就是硬性的执行吃->睡->吃,确实也能实现,也就是 代理执行了呗

那要是这样呢?

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner').eat('dinner').eat('dinner').eat('dinner')

中间睡一次,后面就使劲吃呢?那我们就要思考怎么实现后面的好多吃了

那就是事件放在一个数组里面,然后循环执行,我们还要加一个flag,来区分是否在睡,一个数组来放我们的方法。

const LazyMan = function(name){

    console.log(`Hi i am ${name}`);

    let _lazyMan = {
          isSleep: false,
        waitFun: [],
        sleep: function(time){
            this.isSleep = true
            setTimeout(()=>{
                console.log('I am sleep ' + time)
                this.waitFun[0]()
                this.waitFun.shift()
                this.isSleep = false
            },time)
            return this
        },
        eat: function(food){
            if(this.isSleep){
                this.waitFun.push(this.lunch)
            } else{
                console.log('I am eat ' + food)
            }
        }
      
    };

    return _lazyMan;
} 

大概就是这样了,难度升级,我们让他中间随意睡睡吃吃睡睡,无规律,怎么实现?难点在于每一次睡就要等待,然后执行链式相应的方法。

既然这样,我们就把每一次睡之后的方法分组,然后根据分组来实现,实现后清空执行过的组,然后下一次睡醒了之后,执行该组的方法,这样分析完之后就显得很简单了。代码如下

class LazyManClass {
    constructor(name) {
        console.log(`I am ${name}`)
        this._funs = []
        setTimeout(() => {
            this.next()
        })

    }
    sleepFirst(time) {
        let fn = () => {
            setTimeout(() => {
                console.log(`sleep ${time}`)
                this.next()
            }, time)
        }
        this._funs.unshift(fn)
        return this
    }
    sleep(time) {
        let fn = () => {
            setTimeout(() => {
                console.log(`sleep ${time}`)
                this.next()
            }, time)
        }
        this._funs.push(fn)
        return this
    }
    eat(food) {
        let fn = () => {
            console.log(`eat ${food}`)
            this.next()
        }
        this._funs.push(fn)
        return this
    }
    next() {
        let fn = this._funs.shift()
        fn && fn()
    }

}
function LazyMan(name){
    return new LazyManClass(name)
}
LazyMan('tony').eat('lunch').sleep(2000).eat('dinner').sleepFirst(3000)

强子
335 声望10 粉丝

尽人事,安天命!