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

  1. var api = 'http://qgy18.imququ.com/file/when/d.php?cb=?';
  2.  
  3. var getData = function() {
  4.     var deferred = when.defer();
  5.  
  6.     $.getJSON(api, function(data){
  7.         deferred.resolve(data[0]);
  8.     });
  9.  
  10.     return deferred.promise;
  11. }
  12.  
  13. var getImg = function(src) {
  14.     var deferred = when.defer();
  15.  
  16.     var img = new Image();
  17.  
  18.     img.onload = function() {
  19.         deferred.resolve(img);
  20.     };
  21.  
  22.     img.src = src;
  23.  
  24.     return deferred.promise;
  25. }
  26.  
  27. var showImg = function(img) {
  28.     $(img).appendTo($('#container'));
  29. }
  30.  
  31. getData()
  32. .then(getImg)
  33. .then(showImg);
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <script src="http://qgy18.imququ.com/file/when/when.js"></script>
  9.     <div id="output"></div>
  10.     <script>
  11.         function run() {
  12.             var deferred = when.defer();
  13.             var start = 1;
  14.             var end = 100;
  15.  
  16.             (function() {
  17.                 if (start <= end) {
  18.                     deferred.notify(start);
  19.                     start++;
  20.                     setTimeout(arguments.callee, 50);
  21.                 } else {
  22.                     deferred.reject('time out!');
  23.                 }
  24.             })();
  25.  
  26.             return deferred.promise;
  27.         }
  28.  
  29.         /**
  30.          * then有三个参数，分别是onFulfilled、onRejected、onProgress，通过这三个参数，就可以指定上一个任务在resolve(完成状态)、reject(失败状态)和notify(执行状态)时该如何处理
  31.          */
  32.         run().then(undefined,
  33.             function(reason) {
  34.                 alert(reason);
  35.             }, function(s) {
  36.                 document.getElementById('output').innerHTML = s + '%';
  37.             }
  38.         );
  39.     </script>
  40. </body>
  41. </html>

when.all

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
  9.     <script src="http://qgy18.imququ.com/file/when/when.js"></script>
  10.     <div id="container"></div>
  11.     <script>
  12.         var getData = function() {
  13.             var deferred = when.defer();
  14.             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"]);
  15.             return deferred.promise;
  16.         }
  17.  
  18.         var getImg = function(src) {
  19.             var deferred = when.defer();
  20.             var img = new Image();
  21.             img.onload = function() {
  22.                 //deferred.resolve(img);
  23.             };
  24.             img.src = src;
  25.             deferred.resolve(img);
  26.             return deferred.promise;
  27.         }
  28.  
  29.         var showImgs = function(imgs) {
  30.             console.log(imgs);
  31.             $(imgs).appendTo($('#container'));
  32.         }
  33.  
  34.         var getImgs = function(data) {
  35.             var deferreds = [];
  36.             for(var i = 0; i < data.length; i++) {
  37.                 deferreds.push(getImg(data[i]));
  38.             }
  39.             return deferreds;
  40.         }
  41.         // when.all接受一个promise数组，返回promise，这个promise会在promise数组中每一个promise都resolve之后再resolve
  42.         when.all(getData().then(getImgs)).then(showImgs);
  43.     </script>
  44. </body>
  45. </html>

when.settle

  1. var promise1 = function() {
  2.     var deferred = when.defer();
  3.     setTimeout(function() {
  4.             console.log('A')
  5.             deferred.reject('A');
  6.         }, 2000);
  7.     return deferred.promise;
  8. };
  9.  
  10. var promise2 = function() {
  11.     var deferred = when.defer();
  12.     setTimeout(function() {
  13.             console.log('B')
  14.             deferred.resolve('B');
  15.         }, 1000);
  16.     return deferred.promise;
  17. };
  18.  
  19. var f = function(result) {
  20.     console.log(result);
  21. }
  22.  
  23. 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. Oracle REGEXP_INSTR 用法

    原文出处 ORACLE中的支持正则表达式的函数主要有下面四个:    1,REGEXP_LIKE :与LIKE的功能相似    2,REGEXP_INSTR :与INSTR的功能相似    3,REG ...

  2. 简单登录案例（SharedPreferences存储账户信息）&联网请求图片并下载到SD卡（文件外部存储）

    新人刚学习Android两周,写一个随笔算是对两周学习成果的巩固,不足之处欢迎各位建议和完善. 这次写的是一个简单登录案例,大概功能如下: 注册的账户信息用SharedPreferences存储: 登 ...

  3. delphi参数传递

    delphi参数传递 参数传递    声明/实现一个过程使用的参数称为形式参数(简称形参),调用过程时传入的参数称为实际参数(简称实参). { Info是形参} procedure ShowInfo( ...

  4. html-----003

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JAVA学习-基础知识

    1.Java程序都是以类的形式编写的.2.存放源代码的文件叫源文件.(电脑不能直接看懂的,需要编译一下,电脑才能懂)如何编译源文件?用javac命令输入"javac 123.Java&quo ...

  6. Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图

    1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...

  7. [转载] CMake Official Tutorial——教程还是官方的好

    CMake官方教程传送门:https://cmake.org/cmake-tutorial/ 以下的内容跟官方教程基本一致,少数地方根据自己的测试有所改动: A Basic Starting Poin ...

  8. PC110304/UVA850

    这题目WA了好几次,主要是我没有理解清楚No solution.这个情况. 如果在match原文做好了,基本map一下就能过了. 与原句match的条件就是: 1.出现了26个字母 2.该空格的地方要 ...

  9. 简单的GDI+双缓冲的分析与实现

    为什么要使用双缓冲绘制 在进行多图元绘制的时候: 因为是要一个一个画上去,所以每画一个图元,系统就要做一次图形的绘制操作,图形的重绘是很占用资源的,特别当需要重绘的图形数量很多的时候,所造成的消耗就特 ...

  10. TCP与UDP网络编程总结（一）

    (1):TCP网络编程 我们注意到服务端与客户端通信时是通过客户端的套接字相互通信的,那么服务端的套接字主要是干什么用的呢? TCP服务端设置监听套接字时 int listen(int sock,in ...