JavaScript流程控制,关键是如何实现任务的顺序执行。

来源:互联网 发布:淘宝模特纹身 编辑:程序博客网 时间:2024/05/24 00:06
实现一个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


以此类推。


。。。。。。。。。。。。。。


JavaScript流程控制,关键是如何实现任务的顺序执行。

创建一个任务队列,再调用next()函数来控制任务的顺序执行:

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);  //闭包,执行方法后,调用next方法    this.tasks.push(fn);    setTimeout(function(){        self.next();    }, 0); // 在下一个事件循环启动任务}/* 事件调度函数 */_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; // 实现链式调用}_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() {                self.next(); console.log("Wake up after " + time + "s!");            }, time * 1000);        }    })(time);    this.tasks.unshift(fn);    return this;}function LazyMan(name){   //封装    return new _LazyMan(name);}