IT工程師數位筆記本

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

實現一個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");