微信前端面試題----js實現LazyMan

最近看到了微信前端的一道面試題,題目是這樣的:

 

實現一個LazyMan，能夠按照如下方式調用:
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

以此類推。

 

你們能夠本身嘗試着寫一下,如下是我我的寫的代碼及分析:

 

實際上是一個關於js流程控制的問題:

本身手寫了一下,一開始以爲沒什麼難度,寫的時候仍是發現了一些問題,不過也順帶複習了一下js基本功,代碼以下:

 

function LazyMan(name){
　　return new _lazyman(name);
}

function _lazyman(name) {
　　this.task=[];
　　var that=this;
　　var fn=(function(name){
　　　　return function(){
　　　　　　console.log("Hello I'm "+name);
　　　　　　that.next();
　　　　}
　　})(name);

　　this.task.push(fn);

　　setTimeout(function(){that.next()},0)

//此處用settimeout執行是由於settimeout會在同步線程都進行完了以後再執行,若是不用settimeout就會同步觸發,事件還未都放在隊列中,就已經開始執行了

//關於js同步,異步,事件循環等,能夠看這篇文章http://blog.csdn.net/alex8046/article/details/51914205

}

_lazyman.prototype={
　　constructor:_lazyman,

//next是實現函數在隊列中順序執行功能的函數

　　next:function(){
　　　　var fn=this.task.shift();
　　　　fn&&fn();
　　},

　　sleep:function(time){
　　　　var that=this;
　　　　var fn=(function(time){
　　　　　　return function(){
　　　　　　　　console.log("sleep......."+time);
　　　　　　　　setTimeout(function(){
　　　　　　　　　　that.next();
　　　　　　　　},time)
　　　　　　}
　　　　})(time);
　　　　this.task.push(fn);

　　　　return this;

//return this是爲了實現鏈式調用
　　},

　　sleepfirst:function(time){
　　　　var that=this;
　　　　var fn=(function(time){
　　　　　　return function(){
　　　　　　　　console.log("sleep......."+time);
　　　　　　　　setTimeout(function(){
　　　　　　　　　　that.next();
　　　　　　　　　　},time)
　　　　　　　　}
　　　　　　})(time);
　　　　this.task.unshift(fn);
　　　　return this;
　　},

　　eat:function(something){
　　　　var that=this;
　　　　var fn=(function(something){
　　　　　　　　return function(){
　　　　　　　　console.log("Eat "+something);
　　　　　　　　that.next();
　　　　　　　　}
　　　　　　})(something)
　　　　　　this.task.push(fn);
　　　　　　return this;
　　　　}
　　}
LazyMan("Joe").sleepfirst(3000).eat("breakfast").sleep(1000).eat("dinner");