javascript异步编程之回调函数和管理器用法实例详解-js教程-PHP中文网

javascript异步编程之回调函数和管理器用法实例详解

伊谢尔伦

发布： 2017-07-21 14:31:19

原创

1745人浏览过

基于浏览器的事件轮询机制（以及node.js中的事件轮询机制），javascript常常会运行在异步环境中。由于javascript本身语言的特性（不需要程序员操控线程/进程），在js中解决异步化编程的方法就显得相当重要。可以说一个完整的项目中，js开发人员是不可能不面对异步操作的。

一.回调函数

（1）经典回调函数方式：嵌套内联函数

假设我们有一个ajax()方法，他接收一个url参数，向该地址发起一个异步请求，在请求结束时执行第二个参数—一个回调函数：

ajax(url,function(result){
 console.log(result);
});

登录后复制

可以说这种方式几乎是每个前端开发人员都用过的回调函数方式，有了这样的回调机制，开发人员就不用编写类似下面这样的代码来推测服务器请求什么时候返回：

立即学习“Java免费学习笔记（深入）”；

var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);

登录后复制

大家应该能明白我此处想表达的意思。我们设置了一个延迟400毫秒的定时器，来假设我们发出的ajax请求会在400毫秒之内完成。否则，我们将会操作一个undefined的result。

但是有一个问题随着项目的扩大渐渐浮现出来：如果场景需要我们多层嵌套回调函数，代码将变得难以阅读和维护：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});

登录后复制

（2）调用外部函数

为了解决内联回调函数暴露出来的代码混乱问题，我们引入外部函数调用来解决类似问题：

function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});

登录后复制

通过这种拆分内联函数，来调用外部函数的优化方法，能极大的保持代码的简洁性。

二.制定回调管理器

观察流行的JavaScript流程控制工具，例如Nimble、Step、Seq，我们会学习到一种简洁的设计模式：通过回调管理器来控制异步JavaScript执行流程，下面是一个典型的回调管理器的关键代码示例：

var Flow={};
//设置next方法，在上一个方法完成时调用下一个方法
Flow.next=function(){
 if(this.stack[0]){
  //弹出方法栈中的第一个方法，并执行他
  this.stack.shift()();
 }
};
//设置series方法，接收一个函数数组，并按序执行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通过Flow.series我们能够控制传入的函数的执行顺序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);

登录后复制

我们初始化了一个Flow控制器，为他设计了series和next两个函数属性。在我们编写的业务方法内部，在方法结尾处通过调用Flow.next()的方式来顺序触发下一个方法；通过执行series方法来顺序执行异步函数。这种通过核心控制器来管理异步函数调用的方式简化了我们的编程过程，让开发人员能够投入更多精力在业务逻辑上。

以上就是javascript异步编程之回调函数和管理器用法实例详解的详细内容，更多请关注php中文网其它相关文章！