js异步模块以及回调--async.js

js jquery 异步 回调 Deferred promise 地狱回调 地狱 回调

说到js的异步就会让我想到使用requirejs和jquery的$.ajax，和HTML5的异步，之前都有介绍过可以参阅：

《jquery内置异步功能简单使用》 《html5异步》 《requirejs教程》 《requirejs模块管理插件简单介绍及案例》

IE 6+
Opera 15+
Safari 5+
Chrome 30+
Firefox 3.6.28+

async.js是为nodejs开发出来的异步编程模块，但是也可以直接用于网页中使用，兼容性可以支持IE6以上。

如果要在nodejs上使用就安装

下载：async.rar

npm install async

<script src="async.min.js"></script>

举两个简单例子：

 //同步，只有当前面的函数执行完成后，后面的函数才能执行，都执行完成后才回调成功函数，
如果中途有错误被激活后面的函数也不会执行，立马回调出错误的函数。

async.series([ 
  function (fn) {
     setTimeout(function () {
       $('div').css({ 'background': 'red' });
       fn(null); //在同步时，设置null表示成功，下面的步骤才会执行，null以外的内容表示错误
     }, 3000);
  }, function (fn) {
     console.log(2);
     fn(null);
  }], function (err, sucess) {
     if (err) {
        document.title = '出错，没全部都执行';
     } else if (sucess) {
        document.title = '成功，全部都执行了';
     } 
 });

作用就是为某个函数添加回调函数，这个其实在jquery也能实现。

//each 
//异步，不管之前的函数有没有执行，后面的函数也能先执行，都执行完成后才进行回调

var items = [    
   function (callback) {
     setTimeout(function () { alert(1); callback() }, 2000);
   },
   function (callback) {
     alert(2);
     callback()
   }
 ];


async.each(items, function (item, callback) {
    (item)(callback);
  }, function () {
    alert('都执行了');
 });


--------------------------------------------------------------------------------------

//异步，eachLimit当作是each的加强版，只是添加了一个limit参数也就是允许同时执行函数的进程数量
//在没有出错的情况下，下面的例子弹出的顺序是 2，3，1，5，4
//你可以理解为一个厕所有2个公共坑位，1和2同时进，3,4,5后面等。2立马就出来，1还迟迟没出来，
//2的位置就让3给用了，3也立马出来，接着4进去，这时刻4和1同时在里面。1终于出来了，
//5立马进去也立马出来，最后4也出来了。

//某个函数中激活错误函数，后面的函数不会运行，错误回调立马被执行


async.eachLimit([ 
   function (callback) {
      setTimeout(function () {
        alert(1);
        callback()
      }, 4000);
   }, function (callback) {
        alert(2);
        callback()
   }, function (callback) {
        alert(3);
        callback()
   }, function (callback) {
        setTimeout(function () {
          alert(4);
          callback()
        }, 5000);
    }, function (callback) {
         alert(5);
         callback()
       }
  ],2, function (item, callback) {
       (item)(callback);
      }, function (err) {
          if (err) {
              alert('有错误到此为止');
          } else {
              alert('都执行完成了');
          }
 });




--------------------------------------------------------------------------------

//eachSeries   
//和each有2点不同，
//1,eachSeries是同步的
//2,一旦某一个函数中的错误被激活，此函数的后面其他函数就不会执行

async.eachSeries([
  function (callback) {
    setTimeout(function () {
       alert(1);
       callback()
    }, 2000);
  }, function (callback) {
       alert(2);
       callback()
  }, function (callback) {
       alert(3);
       callback()
  }
 ], function (item, callback) {
       (item)(callback);
 }, function (err) {
      if (err) {
        alert('有错误到此为止');
      } else {
        alert('都执行完成了');
      }
 });

// 同步,上一个函数可以传值给下一个函数使用，如果某一个函数错误激活后面的函数也不能执行，之后就是回调
//waterfall 的 tasks 参数只能是数组类型
async.waterfall([
   function (callback) {
      callback(null, 'one', 'two');
   },
   function (arg1, arg2, callback) { //上面的callback传2个参数，要接受的话就设置2个参数
      console.log(arg1 + '--' + arg2); // one--two
      callback(null, 'three','fff','4444');
   },
      function (arg1, arg2, arg3, callback) {//上面的callback传3个参数，要接受的话就设置3个参数
      console.log(arg1 + '--' + arg2 + '--' + arg3); //three--fff--4444
      callback(null, 'done');
   }
 ], function (err, result) {
      if (err) {
          alert('有错误' + err);
      } else {
          alert('都执行了' + result);
      }
 });




//如果希望第一个函数也能接收到其他值的话可以这么写

async.waterfall([
   async.apply(myFirstFunction, 'zero'),
   mySecondFunction,
   myLastFunction,
 ], function (err, result) {
   // result now equals 'done'
 });


 function myFirstFunction(arg1, callback) {
   // 第一个函数接收到zero参数
   callback(null, 'one', 'two');
 }
 function mySecondFunction(arg1, arg2, callback) {
   callback(null, 'three');
 }
 function myLastFunction(arg1, callback) {
   callback(null, 'done');
 }

//异步，如果没激活错误返回的结果是 one,two,thress,thress 是按照之前的顺序排序的，
//跟执行的时间顺序无关。

//如果某个函数有激活错误，错误的回调立马执行，后面的函数依然执行。

async.parallel([
   function (callback) {
      callback(null, 'one');
   },
   function (callback) {
      console.log(22);
      callback(null, 'two');
   }, function (callback) {
      console.log(33);
      callback(null, 'thress');
   }, function (callback) {
      console.log(44);
      callback(null, 'thress');
   }],
 function (err, results) {
     if (err) {
        console.log('错误：'+err);
     } else {
        console.log('成功：' + results);
     }
 });

//批量修改数组内容，功能跟jquery中的map一样

 async.map(['file1', 'file2', 'file3'], function (item, callback) {
     console.log(item); // file1,file2,file3
     callback(null, item + 1);
   }, function (err, results) {
     if (err) {
        console.log(err);
     } else if (results) {
        console.log(results); // ["file11", "file21", "file31"]
     }
 });


扩展功能
mapSeries(arr, iteratee, [callback])
mapLimit(arr, limit, iteratee, [callback])

//效果就是类似for循环完了之后就回调一个函数

var count = 0;
async.during(
   function (callback) {
     // console.log('当count等于' + count+'时，执行了一些代码'); //代码放这里执行了6次
     return callback(null, count < 5);
   },
   function (callback) {
     count++;
     // console.log('当count等于' + count + '时，执行了一些代码'); //代码放这里执行了5次(推荐放这里)
     document.title = count;
     setTimeout(callback, 1000);
     // console.log(count);
   },
   function (err,sucess) { //第六秒时候执行回调
     if (err) { } else { document.title = 'for循环成功后回调'; }
   }
 );

//类似for循环，创建对象

var arr = [];
 function createUser(id, callback) {
    callback(null, {  //这里写的对象就是我们要循环创建的
      id: 'user' + id
    })
 }
 // generate 5 users
 async.times(5, function (n, next) {
    createUser(n, function (err, user) {
       console.log(n); //索引
       console.log(user); //对象
       next(err, user)
    })
 }, function (err, users) {
       arr = users;
 });

console.log(arr);

//同步，设置为1 任意一个函数错误激活后面程序仍然可以运行，都运行完成后回调
//异步，设置>1的数字 任意一个函数错误激活后面程序仍然可以运行，都运行完成后回调

var q = async.queue(function (task, callback) {
   //q.length() //返回还有多少个正在等待的要执行的函数，假如有3个进程，第一个函数必须先执行后才能执行到它，因为他查询的是等待的函数。
   // console.log(q.started); //判断我们定义的这个q对象是否已经开始执行整个程序，true是这个整个程序开始执行了。
  if (task.name == '工人1') {
    setTimeout(function () {
      console.log('hello ' + task.name);
      callback(1);
    }, 3000)
  } else if (task.name == '工人2') {
     setTimeout(function () {
       console.log('hello ' + task.name);
       callback(1);
     }, 3000)
   } else {
      console.log('hello ' + task.name);
      callback();
    }
},2); //这里设置并发数有2以上的就是异步了，如果没设置默认就是1，也就是同步了



 q.drain = function () { //所有的程序都执行完，而且不管成不成功都要执行这里
    console.log('最后这里总要执行');
    // console.log(q.idle()); //默认是false说明程序在执行，如果为true说明程序已经结束了。
 }


 q.empty = function () { //总是在最后一个函数执行完成之前执行。例如，有3个函数，在前2个函数执行完成后就立马执行。
    console.log('总是在最后一个函数执行完成之前执行');
    // console.log(q.idle()); //默认是false说明程序在执行，如果为true说明empty程序已经结束了。
 }


 q.push({ name: '工人1' }, function (err) {
    if (err) {
       console.log('工人1 没完成'); //单进程失败回调
      //ill(); //在此代码后面的所有函数都不会执行，包括q.drain
      //.pause() //此代码后面的，函数暂时停止运行
      //q.paused //true,表示程序暂停 false，表示没暂停 
      // setTimeout(function () { q.resume() }, 13000); //13秒后恢复 q.pause和q.resume配合使用
    } else {
       console.log('工人1 完成'); //单进程成功回调
    }
 });



q.push({ name: '工人2' }, function (err) {
    if (err) {
      console.log('工人2 没完成');
    } else {
      console.log('工人2 完成');
    }
 });



q.push({ name: '工人3' }, function (err) {
    if (err) {
       console.log('工人3 没完成');
    } else {
       console.log('工人3 完成');
    }
 });

https://github.com/caolan/async

http://www.easyui.info/archives/1788.html

https://cnodejs.org/topic/54acfbb5ce87bace2444cbfb