如何實(shí)現(xiàn)一個(gè) LazyMan?

tianyu 發(fā)布于2019-08-30 15:53 / 538人閱讀

摘要：實(shí)現(xiàn)一個(gè)，可以按照以下方式調(diào)用輸出輸出等待秒輸出輸出等待秒以此類推。這是典型的流程控制，問題的關(guān)鍵是如何實(shí)現(xiàn)任務(wù)的順序執(zhí)行。

    實(shí)現(xiàn)一個(gè)LazyMan，可以按照以下方式調(diào)用:
    LazyMan(“Hank”)輸出:
    Hi! This is Hank!

    LazyMan(“Hank”).sleep(10).eat(“dinner”)輸出
    Hi! This is Hank!
    //等待10秒..
    Wake up after 10
    Eat dinner~

    LazyMan(“Hank”).eat(“dinner”).eat(“supper”)輸出
    Hi This is Hank!
    Eat dinner~
    Eat supper~

    LazyMan(“Hank”).sleepFirst(5).eat(“supper”)輸出
    //等待5秒
    Wake up after 5
    Hi This is Hank!
    Eat supper

    以此類推。

這是典型的JavaScript流程控制，問題的關(guān)鍵是如何實(shí)現(xiàn)任務(wù)的順序執(zhí)行。在Express有一個(gè)類似的東西叫中間件，這個(gè)中間件和我們這里的吃飯、睡覺等任務(wù)很類似，每一個(gè)中間件執(zhí)行完成后會調(diào)用next()函數(shù)，這個(gè)函數(shù)用來調(diào)用下一個(gè)中間件。

對于這個(gè)問題，我們也可以利用相似的思路來解決，首先創(chuàng)建一個(gè)任務(wù)隊(duì)列，然后利用next()函數(shù)來控制任務(wù)的順序執(zhí)行：

function _LazyMan(name) {
    this.tasks = [];   
    var self = this;
    var fn =(function(n){
        var name = n;
        return function(){
            console.log("Hi! This is " + name + "!");
            self.next();
        }
    })(name);
    this.tasks.push(fn);
    setTimeout(function(){
        self.next();
    }, 0); // 在下一個(gè)事件循環(huán)啟動任務(wù)
}
/* 事件調(diào)度函數(shù) */
_LazyMan.prototype.next = function() { 
    var fn = this.tasks.shift();
    fn && fn();
}
_LazyMan.prototype.eat = function(name) {
    var self = this;
    var fn =(function(name){
        return function(){
            console.log("Eat " + name + "~");
            self.next()
        }
    })(name);
    this.tasks.push(fn);
    return this; // 實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用
}
_LazyMan.prototype.sleep = function(time) {
    var self = this;
    var fn = (function(time){
        return function() {
            setTimeout(function(){
                console.log("Wake up after " + time + "s!");
                self.next();
            }, time * 1000);
        }
    })(time);
    this.tasks.push(fn);
   return this;
}
_LazyMan.prototype.sleepFirst = function(time) {
    var self = this;
    var fn = (function(time) {
        return function() {
            setTimeout(function() {
                console.log("Wake up after " + time + "s!");
                self.next();
            }, time * 1000);
        }
    })(time);
    this.tasks.unshift(fn);
    return this;
}
/* 封裝 */
function LazyMan(name){
    return new _LazyMan(name);
}