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

最新推荐文章于 2025-03-03 20:41:38 发布

0_undefined_null

最新推荐文章于 2025-03-03 20:41:38 发布

阅读量1.2w

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/rangwotongxing34/article/details/79378790

版权

JS 专栏收录该内容

1 篇文章

订阅专栏

转：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>