借助Q.js学习javascript异步编程。
2024-09-26 00:11:54
金字塔式
//add1
function step1(n, callback) {
setTimeout(function(){
callback.call(null, n + 1);
}, 100);
};
//add2
function step2(n, callback) {
setTimeout(function(){
callback.call(null, n + 2);
}, 100);
};
//add3
function step3(n, callback) {
setTimeout(function(){
callback.call(null, n + 3);
}, 100);
};
//add4
function step4(n, callback) {
setTimeout(function(){
callback.call(null, n + 4);
}, 100);
};
首先看这4个方法，都是setTimeout加上一个数字。接下来我们就用这四个方法实现+1,+2,+3,+4
step1(1, function(n){
step2(n, function(n){
step3(n, function(n){
step4(n, function(n){
alert(n); //11
});
});
});
});
ok~~~， 不错，功能实现了。
链式
如果我们Q.js如何来改进这段代码呢？
//add1
function step1(n) {
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(n + 1);
}, 100);
return dtd.promise;
};
//add2
function step2(n) {
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(n + 2);
}, 100);
return dtd.promise;
};
//add3
function step3(n) {
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(n + 3);
}, 100);
return dtd.promise;
};
//add4
function step4(n) {
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(n + 4);
}, 100);
return dtd.promise;
};
Q.when(step1(1))
.then(step2)
.then(step3)
.then(step4)
.then(function(n){
alert(n); //11
});
看上去好多了，金字塔不见了，就成流水一般的代码，当然单个的function有点变得复杂，但整理结构变得好理解了。
还可以这样子
Q(1)
.then(step1)
.then(step2)
.then(step3)
.then(step4)
.then(function(n){
alert(n);//11
});
我们需要一起返回 all
var func1 = function(){
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(1);
}, 1000);
return dtd.promise;
};
var func2 = function(){
var dtd = Q.defer();
setTimeout(function(){
dtd.resolve(10);
}, 2000);
return dtd.promise;
};
Q
.all([func1(), func2()])
.then(function(arr){
console.log(arr);
});
你不知道func1 和func2 什么时候会执行完成，但是我们需要这两个方法的返回结果，这看上去解决了我们的一个大问题。
spread也能实现
var func1 = function(){
return Q.Promise(function(resolve, reject, notify) {
setTimeout(function(){
resolve(1);
}, 1000);
});
}
var func2 = function(){
return Q.Promise(function(resolve, reject, notify) {
setTimeout(function(){
resolve(10);
}, 1000);
});
};
Q
.spread([func1(), func2()], function(a, b){
console.log(a, b); //1 10
});
这例子中还用了Q.Promise。 这看上去比 Q.defer()省事一点。
其实呢这库应该还有很多方法，我初学了一下，觉得不错，所以现学现卖，感兴趣的同学可以看一下这个库https://github.com/kriskowal/q
中文文档也不多，哈哈！慢慢啃吧.
学习的时候请加库
<script src="http://cdn.bootcss.com/q.js/1.4.0/q.js"></script>
最新文章
- maven下载速度慢的解决方法（转）
- How to log in to Amazon EC2 using PEM format from SecureCRT
- 如何正确学习JavaScript
- POJ 2352 Stars(HDU 1541 Stars)
- 牛一网ecshop综合类模板(仿淘常州) for ecshop 2.7.3
- 【Apache开源软件基金会项目】
- 前端程序员：月薪 5K 到 5 万，我干了啥
- Keil MDK入门---从新建一个工程开始
- SPOJ GCDEX (数论)
- ajax应用篇
- 仿javascript中confirm()方法的小插件
- Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例
- 2016 UESTC Training for Dynamic Programming
- Linux 下编译安装xDebug命令速记
- MYSQL时间盲住
- ASP.NET Zero--Migration控制台应用程序
- koa中间件
- Jvm远程监控
- ios开发dismiss所有控制器
- Redux其实很简单（原理篇）