Web Front-end
JS Tutorial
Detailed explanation of JavaScript queue functions and asynchronous execution
Detailed explanation of JavaScript queue functions and asynchronous execution
I have seen a similar queue function when referring to other people's JavaScript code, but I don't quite understand it. It turns out that this is to ensure that the functions are called in order. This article mainly introduces JavaScript queue functions and asynchronous execution methods to you. I hope it can help you.
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 = [];// 执行其他操作，定义fn1stack.push(fn1);// 执行其他操作，定义fn2、fn3stack.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 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通过stack[index]去获取stack中的函数，每调用next一次index会加1，从而达到取出下一个函数的目的。next is used like this:
var stack = [];
// 定义index 和nextfunction 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，最终按顺序输出'第一个调用'、'第二个调用'、'第三个调用'。
现在stack.forEach一行已经删掉了，我们自行调用一次next，next会找出stack中的第一个函数fn1执行，fn1 里调用next，去找出下一个函数fn2并执行，fn2里再调用next，依此类推。Every function must call next. If it is not written in a function, the program will directly execute the function after executing it. End, no mechanism to continue.
After understanding the 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 中大名鼎鼎的connect框架正是这样实现中间件队列的。有兴趣可以去看看它的源码或者这篇解读《何为 connect 中间件》。
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 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, 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. Very clever. Write again when you have time.
Related recommendations:
Share an encapsulated javascript event queue function code to solve the problem of binding events
Your own encapsulated javascript event Queue function version_javascript skills
jquery queue function usage example_jquery
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
Advanced Guide to Python asyncio: From Beginner to Expert
Mar 04, 2024 am 09:43 AM
Concurrent and Asynchronous Programming Concurrent programming deals with multiple tasks executing simultaneously, asynchronous programming is a type of concurrent programming in which tasks do not block threads. asyncio is a library for asynchronous programming in python, which allows programs to perform I/O operations without blocking the main thread. Event loop The core of asyncio is the event loop, which monitors I/O events and schedules corresponding tasks. When a coroutine is ready, the event loop executes it until it waits for I/O operations. It then pauses the coroutine and continues executing other coroutines. Coroutines Coroutines are functions that can pause and resume execution. The asyncdef keyword is used to create coroutines. The coroutine uses the await keyword to wait for the I/O operation to complete. The following basics of asyncio
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Asynchronous and non-blocking technology in Java exception handling
May 01, 2024 pm 05:42 PM
Asynchronous and non-blocking techniques can be used to complement traditional exception handling, allowing the creation of more responsive and efficient Java applications: Asynchronous exception handling: Handling exceptions in another thread or process, allowing the main thread to continue executing, avoiding blocking. Non-blocking exception handling: involves event-driven exception handling when an I/O operation goes wrong, avoiding blocking threads and allowing the event loop to handle exceptions.
