A brief discussion on Javascript threads and timing mechanisms

A brief discussion on Javascript threads and timing mechanisms_javascript skills

WBOY

Release： 2016-05-16 15:51:57

Original

891 people have browsed it

Usage of setTimeout and setInterval

The second parameters of setTimeout and setInterval defined in the Javascript api document mean respectively the number of milliseconds after which the callback function is executed and the number of milliseconds after which the callback function is executed. But with the accumulation of work experience, we found that this is not the case.

For example

div.onclick=function(){
  setTimeout(function(){
     document.getElementById('input').focus(); 
  },0);
}

Copy after login

I can’t explain it. Just execute it immediately. Why do you need to set a timer to go around in circles?

Another day you wrote the following piece of code

setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);

Copy after login

The first line of code loops endlessly, resulting in the second line of alert never appearing. Why?

Single thread or multi-thread?
It turns out that the JavaScript engine runs in a single thread, and the browser has only one thread running the JavaScript program. Because of the single-threaded design, complex multi-thread synchronization issues are eliminated.

When setting a timer, the browser will insert the callback function you specify into the task sequence after the set time instead of executing it immediately. If the timing time is set to 0, it means that the task sequence is inserted immediately instead of being executed immediately. You still have to wait for the tasks in the queue to be executed and it is your turn before you execute them.

So the following code pops up 2 first, then 1

setTimeout(function(){
  alert(1);
},0);
alert(2);

Copy after login

So, what is the practical use of this? Let’s take a look at the example below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>setTimeout 0</title>
  </head>
  <body>
    输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
    输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
    <div></div>
    <script>
      function show(val){
        document.getElementsByTagName("div")[0].innerHTML=val;
      }
    </script>
  </body>
</html>

Copy after login

In this example, the js engine needs to execute the keydown event handler and then update the value of the input box. When the event handler is executed, the task of updating the value can only enter the queue to wait, so the updated value cannot be obtained when the keydown event is executed; but through setTimeout we put the operation of getting the value into the queue and execute it after updating the value, so The content will be displayed in real time.

Come back and look at the following code:

setTimeout(function(){
  //do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  //do something...
},10);

Copy after login

These two pieces of code look to have the same effect, don’t they? In fact, there is a difference. The setTimeout in the callback function of the first paragraph is a new timing set after the js engine is executed. It is assumed that there is a time interval from the completion of the previous callback to the start of the next callback. Theoretically, the time interval > ;=10ms, the following code <=10ms.

Speaking of which, is XMLHttpRequest really asynchronous? Yes, the request is asynchronous, but this request is a new thread opened by the browser. When the requested state changes, if a callback has been set previously, the asynchronous thread will put the state change event into the js engine processing queue to wait for processing. When the task is processed, the js engine will always execute the function set by onreadystatechange in a single thread.

The above is the entire content of this article, I hope you all like it.