JavaScript的单线程与阻塞式执行（附案例）

你的名字 2022-05-31 13:39 527阅读 0赞

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

以上用于解释下面的代码，理解的关键就是“阻塞式执行”代码源自《javascript设计模式与开发实践》：

<body>  
<input type="checkbox" id="1"></input>1  
<input type="checkbox" id="2"></input>2  
<input type="checkbox" id="3"></input>3  
<input type="checkbox" id="4"></input>4  
<input type="checkbox" id="5"></input>5  
<input type="checkbox" id="6"></input>6  
<input type="checkbox" id="7"></input>7  
<input type="checkbox" id="8"></input>8  
<input type="checkbox" id="9"></input>9  
</body>  
<script>  
  
  
var timeWait =function()\{  
for(var i=0;i<100000000;i++)\{  
  
\}  
\}  
var synchronousFile =function(id)\{  
console.log("开始同步文件,id为："+id);  
for(var i=0;i<100;i++)\{  
timeWait();  
\}  
console.log("同步文件结束");  
\}  
var proxySynchronousFile =(function()\{  
var cache=\[\],timer;  
return function(id)\{  
console.log(id,timer);  
cache.push(id);  
if(timer)\{  
return;  
\}  
timer =setTimeout(function()\{  
synchronousFile(cache.join(","));  
clearTimeout(timer);  
timer=null;  
cache.length=0;  
\},2000);  
\}  
\})();  
var checkbox = document.getElementsByTagName( 'input' );  
for ( var i = 0, c; c = checkbox\[ i++ \]; )\{  
c.onclick = function()\{  
if ( this.checked === true )\{  
proxySynchronousFile( this.id );  
\}  
\}  
\};  
</script>