Detailed explanation of JS queue functions and asynchronous execution examples

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. When calling, you don’t know what functions there are; at this time, you can pre-define an array, push the functions into it when adding functions, and take them out from the array one by one in order when needed, 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. You can just pass in the 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 have 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 a similar asynchronous function, our implementation will be 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) ; Return immediately after fn2 is 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 looks like this:

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

But doing so is equivalent to removing the original fn2Timeout and replacing it with one. New function, then insert 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 defining fn2 There is no fn3 yet, where did this 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 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 function in the stack. Every time next is called, the index will be incremented by 1, so as to achieve the purpose of fetching 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, and call next in fn1. Go 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 The famous connect framework This is how middlewarequeue is implemented. 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 occur:

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

redux and koa pass Different implementations can put next in the middle of the function, and then turn back and execute the code below next after executing the subsequent functions. This is very clever. Write again when you have time.

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