王骏的博客
编程、网络技术点滴...

公告

逐渐将VC知识库的博客迁移到这里!

随笔分类

随笔档案

相册

最新评论

阅读排行榜

评论排行榜

程序员博客   首页  新随笔  订阅  管理  登录 
 
JO2000 阅读(362) 评论(0)

异步函数的顺序执行有很多种方案,例如jQuery的Deferred,ES6开始有的Promise,ES7开始有的Async/Await,以及一些第3方库。注意:ES6有部分浏览器不支持,ES7有许多浏览器不支持。

 

ES6 Promise的方案请移步:http://blog.okbase.net/JO2000/archive/56017.html

 

本文采用jQuery方案。

 

这里有3个函数wait1,wait2,wait3,我们希望wait1执行完后执行wait2,再执行wait3

var wait1 = function(){
  var tasks = function(){
    alert("1执行完毕!");
  };
  setTimeout(tasks,3000);
};

var wait2 = function(){
  var tasks = function(){
    alert("2执行完毕!");
  };
  setTimeout(tasks,2000);
};
var wait3 = function(){
  var tasks = function(){
    alert("3执行完毕!");
  };
  setTimeout(tasks,1000);
};
wait1();
wait2();
wait3();

但实际上,3个函数同时运行,alert的顺序是先3,再2,最后1。

为了实现顺序执行,我们用jQuery的Deferred改写这3个函数,3个函数改写如下:

var wait1 = function(){
  var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
  var tasks = function(){
    alert("1执行完毕!");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,3000);
  return dtd.promise(); // 返回promise对象
};

var wait2 = function(){
  var dtd = $.Deferred();
  var tasks = function(){
    alert("2执行完毕!");
    dtd.resolve();
  };
  setTimeout(tasks,2000);
  return dtd.promise();
};

var wait3 = function(){
  var dtd = $.Deferred();
  var tasks = function(){
    alert("3执行完毕!");
    dtd.resolve();
  };
  setTimeout(tasks,1000);
  return dtd.promise();
};

wait1().then(wait2).then(wait3);

这样实现了1,2,3的顺序执行。

 

当我们需要在wait1,wait2,wait3全部完成后,执行某个操作,可以这样:

$.when(wait1(),wait2(),wait3())
  .done(function(){ alert("全部完成了!"); })
  .fail(function(){ alert("出错啦!"); });

发表评论
切换编辑模式