For non – science computer graduates of children’s shoes. The cycle of events is like a thing that you can’t really figure out. I’m going to talk to you today with questions in my own way.

Why is JS designed to be single threaded?

  • At the beginning of js design, we hope to dynamically add, delete, change and check the browser DOM node. Make dynamic changes to elements.
  • If JS is multithreaded, you can manipulate the same element together at any time.
  • For the browser, it doesn’t know what to do or what to do first. Also, js has no transactions and cannot be locked……
  • To avoid these tedious operational decisions, it is designed to be single-threaded. You can proceed to the next step only after completing one step.

The order in which the code is executed?

  • At the beginning of the js world. As we all know, the order of JS code execution is from top to bottom, and the next line of code can be executed only after one line of execution is completed.
  • Happy to write code and realize that line by line doesn’t work for all cases. For example: what to do at fixed intervals; A program that does something at a fixed interval without issuing a stop instruction; After waiting for a fixed signal, the program does something… And so on and so on.
  • In the basic from the top down can not meet the situation, JS on their own to think of a way, with a small notebook to record, need to let it do things. When it’s done, it automatically checks to see if there’s anything left to do and if it’s over time.
  • This forms a JS event loop.

How to better understand the event loop?

  • When you play a character game, there are always tasks to be done. The basic operation of the player is to complete the main line, the branch line, the mission of the replica.
  • So from a gaming point of view. Code executed from the top down is more likeMain tasktheMacro task. Other things need to be done, but it’s not that high a priority, likeSide queststheMicro tasks.
  • Every game, almost always finished firstMain taskIn to do itSide quests. Like don’t likeMacro taskWhen you’re done, go see itMicro tasksWhether there are microtasks in the queue.
  • Finally, the complete flow of events becomes:
    • performscriptSynchronizing code (Scripts are also macro tasks)
    • If the execution stack is empty, check whether microtasks need to be executed
    • Perform all microtasks
    • Render the UI if necessary
    • Then start the next roundEvent loopExecutes the asynchronous code in the macro task

The myth of event loops

  • setTimeoutThe event value is set to0, andpromiseCode, who executes first? 
    setTimeout(
() = >{
    console.log('set');
},0);
new Promise(
(r,i) = > {
    console.log('p1');
    r('r1');
}).then((r) = >{console.log(r)})
Copy the code
    • What are the results?
    • Code is executed from the top down, encounteredsetTimeout, use a small notebook to note the macro task, encounteredPromiseAnd the outputp1The rest is written down in microtasks in little notebooks.
    • The code is executed from the top down, go to the microtask queue to see if there is a task, outputr1
    • Continue executing macro task asynchronous codesetTimeoutAnd the outputset
    • It’s that simple.

Macro task, micro task team classification

  • Macro task
    • script
    • setTimeout
    • setInterval
  • Micro tasks
    • process.nextTick
    • promise
    • Object.observe
    • MutationObserver