【JavaScript】 to determine the order in which a program is executed

Topics discussed in the second group for front-end enrollment assistance: program execution order judgment;

Discussion area address: www.yuque.com/kuwu/vgfxx6…

To discuss the topic

Determine the order in which the following code is executed

async function async1() {
  console.log(1)
  await async2()
  console.log(2)
  return await 3
}

async function async2() {
  console.log(4)}setTimeout(function() {
  console.log(5)},0)

async1().then(v= >{console.log(v)})

new Promise(function(resolve){
  console.log(6)
  resolve();
  console.log(7)
}).then(function(){
  console.log(8)})console.log(9)
//1 4 6 7 9 2 8 5
Copy the code

Knowledge summary

  1. JavaScript execution will encounterSynchronization taskandAsynchronous tasksTwo cases
    1. Synchronous task: Executed in the main flow, blocking subsequent code execution, is a one-by-one execution
    2. Asynchronous tasks: A task that needs to wait for a condition to trigger but does not affect the execution of the main process. Such as:setTimeout 和 Promise 。
  2. In JavaScript, there is the concept of macro and micro tasks. The order of execution can be abstracted as follows: Each execution of a synchronization task is a macro task. Other macro tasks generated in this macro task are the next synchronization task to be executed. The micro tasks generated in this macro task are executed after the execution of the current macro task is completed and are managed in a queue (generated first, executed first).

  1. The first argument in the setTimeout function is a callback function, and the second argument in the setTimeout function is the number of milliseconds after the need to execute the callback function to the macro task queue, so it is at least the number of milliseconds after the setTimeout does something. ** The second parameter has a minimum delay of 4ms

  1. async/await
    1. What does async do?

Async converts the return value of your function into a Promise object. Without explicitly returning a Promise object, the async keyword automatically converts the return value of your function into a Promise object.

  1. Await the role of

The await keyword can only be used inside functions with the async keyword and an error will be reported when used externally. Await the return value of the right-hand function if the right-hand side is a function, or the right-hand expression if the right-hand side is not a function. Await causes the thread to block subsequent execution. Await is executed from right to left and blocks subsequent code execution, but does not block the expression of await directly. Await will block the following code if it is not a promise after await, and will execute the asynchronous code outside of async first, and wait for the asynchronous code outside to finish executing the code inside of async. This will be a pity. Then, the resolve parameter will be used as the result of the await expression.

  1. Promise easy to understand (for understanding only, use MDN) : The whole implementation of Promise can be regarded as a process of going to KFC, like the waiter ordering a hamburger. At this time, the waiter needs to give me a Promise and then tell me that there are more hamburgers (the sale is successful) or the hamburgers are sold out. After I hear the waiter’s reply, I will make a corresponding decision, eat the hamburger or leave KFC.
Promise((resolve,reject) = >{
  console.log('Buy a burger')
  resolve('There are burgers');
  console.log('I can swipe my phone after placing an order')
}).then((res) = >{
  console.log('The waiter told me there was a hamburger.')
  console.log('Eat a burger')})Copy the code
  1. So in the process of execution

When a piece of code executes, it executes the synchronized code in the macro task first:

  • If encountered during executionsetTimeoutMacro task, so put thissetTimeoutInternal functions are pushed into the “macro task queue” and called when the next macro task is executed.

  • If encountered during executionpromise.then()After the synchronous code execution of this round of macro tasks is completed, all the microtasks 1, 2 and 3 will be executed successively.


referenceGoo Goo doesn’t take off his maskThe solution towww.yuque.com/kuwu/vgfxx6…

Follow-up discussion points

  1. What problem do async and await solve
  2. Where is Promise usually used? What should I pay attention to
  3. What’s special about setTimeout when it’s used
  4. Is determining the order of execution really an everyday development problem?