异步编程：When.js快速上手

var api = 'http://qgy18.imququ.com/file/when/d.php?cb=?';

var getData = function() {

    var deferred = when.defer();

    $.getJSON(api, function(data){

        deferred.resolve(data[0]);

    });

    return deferred.promise;

}

var getImg = function(src) {

    var deferred = when.defer();

    var img = new Image();

    img.onload = function() {

        deferred.resolve(img);

    };

    img.src = src;

    return deferred.promise;

}

var showImg = function(img) {

    $(img).appendTo($('#container'));

}

getData()

.then(getImg)

.then(showImg);
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="http://qgy18.imququ.com/file/when/when.js"></script>

    <div id="output"></div>

    <script>

        function run() {

            var deferred = when.defer();

            var start = 1;

            var end = 100;

            (function() {

                if (start <= end) {

                    deferred.notify(start);

                    start++;

                    setTimeout(arguments.callee, 50);

                } else {

                    deferred.reject('time out!');

                }

            })();

            return deferred.promise;

        }

        /**

         * then有三个参数，分别是onFulfilled、onRejected、onProgress，通过这三个参数，就可以指定上一个任务在resolve(完成状态)、reject(失败状态)和notify(执行状态)时该如何处理

         */

        run().then(undefined,

            function(reason) {

                alert(reason);

            }, function(s) {

                document.getElementById('output').innerHTML = s + '%';

            }

        );

    </script>

</body>

</html>

when.all

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="http://s0.qhimg.com/lib/jquery/183.js"></script>

    <script src="http://qgy18.imququ.com/file/when/when.js"></script>

    <div id="container"></div>

    <script>

        var getData = function() {

            var deferred = when.defer();

            deferred.resolve(["http:\/\/st.imququ.com\/uploads\/2011\/07\/IMAG0038_2.jpg","http:\/\/st.imququ.com\/uploads\/2011\/07\/wewewewe_1.jpg","http:\/\/st.imququ.com\/uploads\/2011\/07\/IMAG0014_2_1.jpg"]);

            return deferred.promise;

        }

        var getImg = function(src) {

            var deferred = when.defer();

            var img = new Image();

            img.onload = function() {

                //deferred.resolve(img);

            };

            img.src = src;

            deferred.resolve(img);

            return deferred.promise;

        }

        var showImgs = function(imgs) {

            console.log(imgs);

            $(imgs).appendTo($('#container'));

        }

        var getImgs = function(data) {

            var deferreds = [];

            for(var i = 0; i < data.length; i++) {

                deferreds.push(getImg(data[i]));

            }

            return deferreds;

        }

        // when.all接受一个promise数组，返回promise，这个promise会在promise数组中每一个promise都resolve之后再resolve

        when.all(getData().then(getImgs)).then(showImgs);

    </script>

</body>

</html>

when.settle

var promise1 = function() {

    var deferred = when.defer();

    setTimeout(function() {

            console.log('A')

            deferred.reject('A');

        }, 2000);

    return deferred.promise;

};

var promise2 = function() {

    var deferred = when.defer();

    setTimeout(function() {

            console.log('B')

            deferred.resolve('B');

        }, 1000);

    return deferred.promise;

};

var f = function(result) {

    console.log(result);

}

when.settle([promise1(), promise2()]).then(f); // [promise1(), promise2()]无序 then有序

【异步编程】when.js的更多相关文章

  1. 异步编程when.js

    when.js很小,压缩后只有数kb,gzip后的大小几乎可以忽略.在Node和浏览器环境里都可以使用when.js 首先,我们看一小段代码: var getData = function(callb ...

  2. ES6 --- JS异步编程的几种解决方法及其优缺点

    导言: 我们都知道 JS 是单线程的,这也正是异步编程对于 JS  很重要的原因,因为它无法忍受耗时太长的操作.正因如此有一系列的实现异步的方法. 方法一  setTimeout 常用于:定时器,动画 ...

  3. Promise和异步编程

    前面的话 JS有很多强大的功能,其中一个是它可以轻松地搞定异步编程.作为一门为Web而生的语言,它从一开始就需要能够响应异步的用户交互,如点击和按键操作等.Node.js用回调函数代替了事件,使异步编 ...

  4. 异步编程Promise/Deferred、多线程WebWorker

    长期以来JS都是以单线程的模式运行的,而JS又通常应用在操作用户界面和网络请求这些任务上.操作用户界面时不能进行耗时较长的操作否则会导致界面卡死,而网络请求和动画等就是耗时较长的操作.所以在JS中经常 ...

  5. 深入解析js异步编程利器Generator

    我们在编写Nodejs程序时,经常会用到回调函数,在一个操作执行完成之后对返回的数据进行处理,我简单的理解它为异步编程. 如果操作很多,那么回调的嵌套就会必不可少,那么如果操作非常多,那么回调的嵌套就 ...

  6. JS魔法堂：深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  7. js异步编程技巧一

    异步回调是js的一大特性,理解好用好这个特性可以写出很高质量的代码.分享一些实际用的一些异步编程技巧. 1.我们有些应用环境是需要等待两个http请求或IO操作返回后进行后续逻辑的处理.而这种情况使用 ...

  8. js异步编程

    前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...

  9. node.js整理 06异步编程

    回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...

  10. 异步编程：When.js快速上手

    前些天我在团内做了一个关于AngularJS的分享.由于AngularJS大量使用Promise,所以我把基于Promise的异步编程也一并介绍了下.很多东西都是一带而过,这里再记录下. Angula ...

随机推荐

  1. compareTo()

    从字面意思可知这个方法就是比较的意思. 所以该方法有如下两种情况: 1.比较前后的两个字符不相同: (1)     String str = "Hello World"; Stri ...

  2. 【转】关于C#接口和抽象类的一些说明

    接口和抽象类 1.概念 什么是接口? 接口是包含一组虚方法的抽象类型,其中每一种方法都有其名称.参数和返回值. 接口方法不能包含任何实现,CLR允许接口可以包含事件.属性.索引器. 一个类可以实现多个 ...

  3. C# 展开和折叠代码的快捷键

    C# 展开和折叠代码的快捷键 VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M +  ...

  4. Java Map集合按照key和value排序之法

    一.理论基点 Map是键值对的集合接口,它的实现类主要包括:HashMap,TreeMap,Hashtable以及LinkedHashMap等. TreeMap:基于红黑树(Red-Black-Tre ...

  5. Ubuntu 13.04 配置Cocos2d-x记录

    装备工作: 下载JavaJDK  http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载NDKhttp://deve ...

  6. POJ 1564(HDU 1258 ZOJ 1711) Sum It Up（DFS）

    题目链接:http://poj.org/problem?id=1564 题目大意:给定一个整数t,和n个元素组成的集合.求能否用该集合中的元素和表示该整数,如果可以输出所有可行解.1<=n< ...

  7. HDU 1429 胜利大逃亡(续)（DP + 状态压缩）

    胜利大逃亡(续) Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)…… 这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢 ...

  8. .net平台下socket异步通讯

    1,首先添加两个windows窗体项目,一个作为服务端server,一个作为客户端Client 2,然后添加服务端代码,添加命名空间,界面上添加TextBox控件 using System.Net; ...

  9. 【实习记】2014-08-24实习生无法映射磁盘替代方案rsync+非默认端口22设置

    正职开发人员有两个电脑,一个办公网的,一个开发网的.通过samba服务在开发网机器上映射编译环境机的磁盘没有问题. 开发岗实习生使用虚拟机做跳板方式登录编译环境机.上面的方法不能用. 替代方法:rsy ...

  10. Java学习----日期函数

    Date   Calendar public class TestDate { private Date date; Calendar calendar; public TestDate() { // ...