Detailed explanation of JavaScript function asynchronous execution implementation code

Suppose you have several functions fn1, fn2 and fn3 that need to be called in sequence. The simplest way is of course:

fn1();
fn2();
fn3();

But there are At this time, these functions are added one by one during runtime, and you don't know what functions there are when you call them; at this time, you can pre-define an array, push the functions into it when adding functions, and select them one by one from the array in order when needed. Take it out and call it in sequence:

var stack = [];
// 执行其他操作，定义fn1
stack.push(fn1);
// 执行其他操作，定义fn2、fn3
stack.push(fn2, fn3);
// 调用的时候
stack.forEach(function(fn) { fn() });

It doesn’t matter whether the function has a name or not, you can just pass the anonymous function in directly. Let’s test it:

var stack = [];
function fn1() {
  console.log('第一个调用');
}
stack.push(fn1);

function fn2() {
  console.log('第二个调用');
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 按顺序输出'第一个调用'、'第二个调用'、'第三个调用'

This implementation works fine so far, but we ignored one situation, which is the call of asynchronous functions. Asynchrony is an unavoidable topic in JavaScript. I am not going to discuss the various terms and concepts related to asynchronous in JavaScript here. Readers are asked to check it out by themselves (such as a famous commentary). If you know that the following code will output 1, 3, and 2, then please continue reading:

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

console.log(3);

If there is a function in the stack queue that is similar As for the asynchronous function, our implementation is messed up:

var stack = [];

function fn1() { console.log('第一个调用') };
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
  }, 0);
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 输出'第一个调用'、'第三个调用'、'第二个调用'

The problem is obvious, fn2 is indeed called in sequence, but the function fn2Timeout() { console in setTimeout .log('Second call') } is not executed immediately (even if timeout is set to 0); fn2 returns immediately after the call, and then executes fn3. After fn3 is executed, it is really fn2Timeout's turn.

How to deal with it? Let's analyze it. The key here is fn2Timeout. We must wait until it is actually executed before calling fn3. Ideally it would be like this:

function fn2() {
  setTimeout(function() {
    fn2Timeout();
    fn3();
  }, 0);
}

But do this It is equivalent to removing the original fn2Timeout and replacing it with a new function, and then inserting the original fn2Timeout and fn3. This method of dynamically changing the original function has a special term called Monkey Patch. According to the mantra of our programmers: "It can definitely be done", but it is a bit awkward to write, and it is easy to get yourself involved. Is there a better way?
We take a step back and do not insist on waiting for fn2Timeout to be completely executed before executing fn3. Instead, we call it on the last line of the fn2Timeout function body:

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    fn3();    // 注{1}
  }, 0);
}

This looks better, but when fn2 was defined, there was no fn3 yet. Where did fn3 come from?

There is another problem. Since fn3 needs to be called in fn2, we cannot call fn3 through stack.forEach, otherwise fn3 will be called twice.

We cannot hardcode fn3 into fn2. On the contrary, we only need to find the next function of fn2 in the stack at the end of fn2Timeout, and then call:

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    next();
  }, 0);
}

This next function is responsible for finding the next function in the stack Next function and execute it. Let’s implement next now:

var index = 0;

function next() {
  var fn = stack[index];
  index = index + 1; // 其实也可以用shift 把fn 拿出来
  if (typeof fn === 'function') fn();
}

next uses stack[index] to get the function in the stack. Every time next is called, the index will be increased by 1, thus achieving removal. The purpose of the next function.
Next is used like this:

var stack = [];

// 定义index 和next

function fn1() {
  console.log('第一个调用');
  next(); // stack 中每一个函数都必须调用`next`
};
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
     next(); // 调用`next`
  }, 0);
}
stack.push(fn2, function() {
  console.log('第三个调用');
  next(); // 最后一个可以不调用，调用也没用。
});

next(); // 调用next，最终按顺序输出'第一个调用'、'第二个调用'、'第三个调用'。

Now that the stack.forEach line has been deleted, we call next by ourselves, and next will find the first line in the stack. A function fn1 is executed, next is called in fn1 to find the next function fn2 and executed, then next is called in fn2, and so on.
Every function must call next. If it is not written in a certain function, the program will end directly after executing the function without any mechanism to continue.

After understanding this implementation of function queue, you should be able to solve the following interview question:

// 实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)
/* 输出: 
Hi! This is Hank!
*/

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
/* 输出: 
Hi! This is Hank!
// 等待10秒..
Wake up after 10
Eat dinner~
*/

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)
/* 输出: 
Hi This is Hank!
Eat dinner~
Eat supper~
*/

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)
/* 等待5秒，输出
Wake up after 5
Hi This is Hank!
Eat supper
*/

// 以此类推。

Node.js is famous in China This is how the connect framework implements middleware queues.

If you are careful, you may see that this next can only be placed at the end of the function for the time being. If it is placed in the middle, the original problem will still appear:

function fn() {
  console.log(1);
  next();
  console.log(2); // next()如果调用了异步函数，console.log(2)就会先执行
}

Through different implementations, redux and koa can place next in the middle of the function. After executing the subsequent functions, it can then be turned back to execute the code below next, which is very clever. Write again when you have time.

The above is the detailed content of Detailed explanation of JavaScript function asynchronous execution implementation code. For more information, please follow other related articles on the PHP Chinese website!