Detailed explanation of usage examples of callback functions and managers in javascript asynchronous programming-JS Tutorial-php.cn

Detailed explanation of usage examples of callback functions and managers in javascript asynchronous programming

伊谢尔伦

Release： 2017-07-21 14:31:19

Original

1497 people have browsed it

Based on the browser's event polling mechanism (and the event polling mechanism in Node.js), JavaScript often runs in an asynchronous environment. Due to the characteristics of the JavaScript language itself (which does not require programmers to control threads/processes), it is very important to solve asynchronous programming in js. It can be said that in a complete project, it is impossible for js developers not to face asynchronous operations.

1. Callback function

(1) Classic callback function method: nested inline function

Suppose we have an ajax() method that receives a url parameter, initiates an asynchronous request to the address, and executes the second parameter - a callback function at the end of the request:

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

Copy after login

It can be said that this method is the callback function method used by almost every front-end developer. With such a callback mechanism, developers do not need to write code similar to the following to speculate when the server request will return:

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

Copy after login

Everyone should be able to understand what I want to express here. We set a timer with a delay of 400 milliseconds, assuming that the ajax request we make will be completed within 400 milliseconds. Otherwise, we will operate on an undefined result.

But there is a problem that gradually emerges as the project expands: if the scene requires us to have multiple layers of nested callback functions, the code will become difficult to read and maintain:

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

Copy after login

(2) Calling external functions

In order to solve the code confusion problem exposed by inline callback functions, we introduce external function calls to solve similar problems:

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

Copy after login

This optimization method of splitting inline functions to call external functions can greatly maintain the simplicity of the code.

2. Develop a callback manager

Observing popular JavaScript process control tools, such as Nimble, Step, and Seq, we will learn a simple design pattern: The asynchronous JavaScript execution process is controlled through the callback manager. The following is a typical key code example of the callback manager:

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();
  }
]);

Copy after login

We initialized a Flow controller and provided it with Two function attributes, series and next, are designed. Within the business method we wrote, the next method is sequentially triggered by calling Flow.next() at the end of the method; asynchronous functions are sequentially executed by executing the series method. This way of managing asynchronous function calls through the core controller simplifies our programming process, allowing developers to devote more energy to business logic.

The above is the detailed content of Detailed explanation of usage examples of callback functions and managers in javascript asynchronous programming. For more information, please follow other related articles on the PHP Chinese website!