异步编程：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. Css3 兼容新旧浏览器

    想想10年前用 IE6,火狐,遨游,谷歌等浏览器学习css时,那叫一个艰苦,各种hack各种抓耳挠腮,不是margin塌陷就是元素飞了... 当前借着css3这个东风,如果各大浏览器厂商能统一一下,也 ...

  2. EventBus3 简单使用及注意点

    博客: 安卓之家 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 # EventBus3 简介 EventBus Android 发布/订阅事件总线,可简化 Activities, Fr ...

  3. A题笔记（1）

    #include <stdlib.h> exit(); #include <stdlib.h> 是 exit(0) 必须的头文件 否则会出现 exit was not decl ...

  4. Winedt 7.0 Build: 20120321 永久试用方法 WinEdt 7.0 破解

    该方法,不是破解. 因为WinEdt试用版与正式版功能无异. 所以,该方法是 通过更新注册表信息,重置安装时间. 也就是重新获取31天的试用期时长. 方法如下: 1.用管理员权限打开CMD. 2.运行 ...

  5. MySQL 连接数据库

    一.MySQL 连接本地数据库,用户名为“root”,密码“123”(注意:“-p”和“123” 之间不能有空格),缺点:密码显示在显示器上,容易泄露. C:\>mysql -h localho ...

  6. 网络解析之XML及JSON

    首先要加入类库GDataXMLNode和JSON 解析本地文件Students.txt <students> <student> <name>汤姆 </nam ...

  7. iOS SDwebImage 使用说明

    SDWebImage托管在github上.https://github.com/rs/SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下 ...

  8. C++自定义异常处理

    自定义异常类 class MyException { public: MyException() { } MyException(char* str) { msg = str; } MyExcepti ...

  9. macbook pro retina 编程字体推荐

    使用VS2010.VS2012.Qt Creator编译工具首推等宽字体,等宽字体中consolas. 首先大家都知道等宽对于编码来说的直观性不言而喻,其次retina屏幕的特殊性,整天用特别小的字体 ...

  10. canvas 之 - 精灵 钟表动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...