Detailed explanation of JavaScript queue functions and asynchronous execution

This article mainly introduces the relevant information of JavaScriptqueue function and asynchronous execution in detail. It has certain reference value. Interested friends can refer to it

Edit Note: I saw a similar queue function when reviewing other people's JavaScript code, but I didn't understand it. It turns out that this is to ensure that the functions are called in order. After reading this article, I found that it can also be used for asynchronous execution, etc.

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 sometimes 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 and push the functions into it when adding the functions. Take them out one by one from the array in order and call them 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 Important, you can also pass

anonymous function 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 asynchronous function transfer. 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 stack There is a function in the queue that is a similar asynchronous function, and 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.log('second call') } in setTimeout is not executed immediately (even if timeout is set to 0); fn2 returns immediately after being called, and then Execute fn3. After fn3 is executed, it is really fn2Timeout's turn.

How to deal with it? After our analysis, the key here is fn2Timeout. We must wait until it is actually executed before calling fn3. Ideally, it would look like this:

##

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

But doing this 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. Instead, 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 and executing 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 functions in the stack. Every time next is called The index will be increased by 1 at a time to achieve the purpose of taking out 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 , next will find the first function fn1 in the stack to execute, call next in fn1 to find the next function fn2 and execute it, then call next 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

This is how the famous connect

framework implements the middleware queue. If you are interested, you can take a look at its source code or this interpretation of "What is connect middleware". 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)就会先执行
}

Redux and koa, through different implementations, can place next in the middle of the function, execute the subsequent functions and then turn back to execute the code below next, which is very clever. Write again when you have time.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Script House.

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