异步编程：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. springMVC+freemarker中Could not resolve view with name... 问题解决

    用到springMVC+freemarker,自己在做demo过程中报: 严重: Servlet.service() for servlet springmvc threw exception jav ...

  2. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  3. Bootstrap--全局CSS样式之概览

    (1)HTML5文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在项目中的每个页面都要参照下面的格式进行设置. Code<!DO ...

  4. Ionic 弹出窗

    Ionic弹窗服务允许程序创建.显示弹出窗口,需要用户继续响应. 弹窗系统支持更多灵活的构建alert(),prompt()和confirm()功能版本,以及用户习惯,除了允许查看完全自定义内容的的弹 ...

  5. 请问JAVA三层架构，持久层，业务层，表现层，都该怎么理解？和MVC三层模型有什么区别

    持久层用来固化数据,如常说的DAO层,操作数据库将数据入库业务层用来实现整体的业务逻辑 如 前台获得了数据,逻辑层去解析这些数据,效验这些数据等操作表现层很好解释  你现在看到的网页 一些界面 都属于 ...

  6. .NET 互操作

    首先推荐一本书<精通.NET 互操作> ,这本书是目前中文资料里讲 互操作最详尽的书了. 做系统集成项目的同学应该都和设备打过交道(如视频设备:海康.大华等),在大多数情况下这些设备厂商会 ...

  7. new、delete用法（一）

    第一部分:new的使用: #define DEBUG_NEW new(THIS_FILE, __LINE__)解释 THIS_FILE:表示当前类所处的文件名: __LINE__:表示分配内存操作所在 ...

  8. phpmailer｛群发并且发送附件｝

    PHPMailer是一个用于发送电子邮件的PHP函数包. 第一,需要下载PHPMailer文件包phpmailer. http://phpmailer.sourceforge.net/     第二, ...

  9. 一些static_cast const_cast

    static_cast:干杂活的,那三个都有各自的专有用途,那三个不做的都由这个转型符来做,只要它能做的,用C语法的强制类型转换运算符也一定能够完成:但话又说回来了,C强制类型转换能做的,它可不一定都 ...

  10. SuperSocket与Netty之实现protobuf协议，包括服务端和客户端

    今天准备给大家介绍一个c#服务器框架(SuperSocket)和一个c#客户端框架(SuperSocket.ClientEngine).这两个框架的作者是园区里面的江大渔. 首先感谢他的无私开源贡献. ...