JavaScript流程控制,关键是如何实现任务的顺序执行。
2017-06-24 17:49
645 查看
实现一个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);
}
相关文章推荐
- Android Executor 如何实现任务Runnable队列顺序执行
- Enterprise Library Policy Injection Application Block 之四:如何控制CallHandler的执行顺序
- 如何确保JavaScript的执行顺序 之实战篇
- [原创]如何确保JavaScript的执行顺序 – 之jQuery.html并非万能钥匙
- Activiti学习笔记六 流程实例 任务 执行对象控制流程执行
- 在批处理文件里面如何控制延时执行指令(也就是实现sleep)
- 用javascript实现控制打开网页窗口的大小 和HTML如何关闭窗口的技巧大全
- js 异步操作回调函数如何控制执行顺序
- [原创]如何确保JavaScript的执行顺序 – 之jQuery.html深度分析
- JavaScript 如何 在onclientclick里控制onclick的执行
- [原创]如何确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异
- [原创]如何确保JavaScript的执行顺序 – 之jQuery.html深度分析
- 如何确保JavaScript的执行顺序 之jQuery.html深度分析
- 如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
- 持续讨论 javascript 如何控制优化页面 js 加载顺序
- [原创]如何确保JavaScript的执行顺序 – 之jQuery.html并非万能钥匙
- 持续讨论 javascript 如何控制优化页面 js 加载顺序
- 内核中如何实现周期性的任务执行
- .NET如何利用timer组件实现每天定时执行某项任务 .
- Javascript基础与面向对象基础~Javascript中的语句如何被执行,如何改变执行顺序