异步编程：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. Java中的I/O流

    import java.io.*//生成代表输入流的对象fis=new FileInputStream("e:/src/from.txt") //生成代表输出流的对象 fos=ne ...

  2. html学习的一些问题

    1,什么是 W3C标准?w3c 标准不是一个标准,而是一系列标准,包括:结构标准,表现标准,动作标准. 2,内链元素和块状元素的区别内链元素允许与其他内链元素位于同一行,没有宽和高,如果想设置宽和搞, ...

  3. plsql中文乱码问题（显示问号）

    问题:打开plsql,执行sql语句,中文显示乱码: 解决方案: 输入sql语句select userenv('language') from dual查看数据库字符集 输入sql语句select * ...

  4. Jquery Datatables(三)

    最近在项目中又使用Datatables的一个有趣功能,官网列子如下图: 点击“+”,展开列表,再次点击收缩. 官网的列子点击展开后的数据也是原来行中的数据,这边有了一个想法是否可以利用Ajax去动态加 ...

  5. [访问系统] Api_Win32_Mac类工具包 （转载）

    点击下载 Api_Win32_Mac.zip using System; using System.Collections.Generic; using System.Linq; using Syst ...

  6. Play - js/css concatenation & minify

    1. Css We’ll use LESS CSS, all less sources are defined in the app/assets, and they will be compiled ...

  7. js中eval函数

    后台数据 // 回显复选框用 List<Long> tempRoles = new ArrayList<Long>(); @SuppressWarnings("unc ...

  8. linux导入导出数据库方法 windows导入导出数据库方法

    1.使用管理员账号(sys)登录查询字符集信息 第一步:查询LinuxOracle数据库的字符集 select userenv('language') from dual; 查询结果集可能为:AMER ...

  9. Angularjs总结（一）表单验证

    常用的表单验证1.必须字段html5特性 增加required <input type="text" required /> 2.最小长度和最大长度 <input ...

  10. 实习之vim基本学习

    最近实习学到了写vim的基本用法,记录一下 批量注释 ctrl+v进入列模式,按“I”进入插入模式,按// #等在每行开头插入注释,esc 批量去除注释 ctrl + v 进入列模式,按“x”即可. ...