JavaScript执行机制

js执行机制

js单线程,同一时间只能做一件事,一切的多线程都是通过单线程模拟出来的 事件循环机制:event loop 同步:进入主线程 异步:进入事件表并注册函数 当指定的事情完成之后,事件表会将这个函数移入到任务队列,主线程内任务执行完毕之后,回任务队列读取对应的函数,移入到主线程执行,不断重复

JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码，此时发生了一次鼠标点击，那么事件处理程序就被阻塞，用户也无法立即看到反馈，事件处理程序会被放入任务队列，直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

也就是说setTimeout只能保证在指定的时间过后将任务(需要执行的函数)插入队列等候，并不保证这个任务在什么时候执行。执行javascript的线程会在空闲的时候，自行从队列中取出任务然后执行它。javascript通过这种队列机制，给我们制造一个异步执行的假象。

当我们执行以下代码时，结果会按1、3、2的顺序弹出。

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

这是事件循环机制，因为js是单线程的，是基于事件循环的。而setTimeout函数是异步的，异步的事件会加入一个队列，会等到当前同步的任务执行完毕后，再执行setTimeout队列的任务。所以，通过设置任务在延迟0毫秒后执行，就能改变任务执行的先后顺序，延迟该任务发生，改变它所调用的函数的优先级，使之异步执行。

1. 下面这段代码，是不会实时获取到输入框里面的内容的。

<input type="text" onkeydown="test(this.value)">  
<div></div>  
<script">  
  function test(val) {  
    document.getElementsByTagName('div')[0].innerHTML = val;  
  }  

可以发现，每按下一个字符时，

   function test(val) { 
       document.getElementsByTagName('div')[0].innerHTML = val;
   }
   1 2 3 4 5 6 能够实时显示输入的内容