js单线程

最新推荐文章于 2023-05-24 15:20:16 发布

你真好看l

最新推荐文章于 2023-05-24 15:20:16 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/qq_40052011/article/details/89326412

版权

本文详细探讨了JavaScript的单线程执行机制，通过案例分析了setTimeout的执行顺序和用途，揭示了JavaScript如何通过事件循环(Event Loop)处理异步任务。文章指出，JavaScript在浏览器中是单线程执行的，利用setTimeout可以改变任务执行顺序，实现异步执行。此外，还讨论了键盘事件(keypress、keyup)和鼠标事件(mousedown、mouseup、click)的执行顺序，以及Web Worker在处理耗时任务中的作用。最后，文章提到了浏览器的多线程模型，强调JavaScript主线程与浏览器其他线程的协同工作，以及如何通过事件队列管理任务执行。

摘要由CSDN通过智能技术生成

案例1

var fuc = [1,2,3];
for(var i in fuc){
  setTimeout(function(){console.log(fuc[i])},0);
  console.log(fuc[i]);
}

1
2
3
3 3
分析代码结果：

虽然setTimeout函数在每次循环的开始就调用了，但是却被放到循环结束才执行，循环结束，i=3,接连打印了3次3。这里涉及到javascript单线程执行的问题：javascript在浏览器中是单线程执行的，必须在完成当前任务后才执行队列中的下一个任务。另外，对于javascript还维护着一个setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。所以在这个问题里，会先打印1 2 3，而将setTimeout任务放到setTimeout任务队列，等循环中的打印任务执行完了，才开始执行setTimeout队列中的函数，所以在最后会接着打印3次3。

由此，可以知道虽然设置为0秒后执行任务，实际上是大于0秒才执行的。可是这有什么用呢？

用处就在于我们可以改变任务的执行顺序！因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。通过设置任务在延迟到0s后执行，就能改变任务执行的先后顺序，延迟该任务发生，使之异步执行。

案例2：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <title>
      图
    </title>
    <meta charset="utf-8">
  </head>
  <body>
  <p>
    <input type="text" id="input" value=""/>
    <span id="preview"></span>
  </p>
  </body>   
<script type="text/javascript">
(function(){
  function $(id){
    return document.getElementById(id);
  }
  $('input').onkeypress = function(){
    $('preview').innerHTML = this.value;
  }
})();

</script>
</html>

这个keypress函数原意是监听到用户输入字符串就将其完整的显示出来，但是奇怪的是最后一个字符串总是没能显示出来:

123456 12345

但是只要改下onkeypress函数就好：
```
   $('input').onkeypress = function(){
     setTimeout(function(){$('preview').innerHTML = $('input').value;},0);
   }
```
将onkeypress里面的事件延迟到浏览器更新相关DOM元素的状态之后执行，这是就能显示出所有字符串了，如下：
12345 12345

setTimeout()是用来改变任务执行顺序的，难道就没有其他代替的方法了吗？答案是有的。

将监听keypress事件改为监听keyup事件，一样能达到同样的效果:

	$('input').onkeyup = function(){
	  $('preview').innerHTML = $('input').value;
	}

这里跟key事件的执行顺序有关:

(function(){
  function $(id){
    return document.getElementById(id);
  }
  function log(a){
    console.log(a);
  }
  $('input').onkeypress = function(){
    log("keypress: "+this.value);
  }
  $('input').onkeyup = function(){
    log("keyup: "+this.value);
  }
  $('input').function(){
    log("keydown: "+this.value);
  }
})();

当用键盘输入1后，控制台打印结果如下：
keydown:
keypress:
keyup: 1
也就是先执行keydown事件，再执行keypress事件，执行keypress事件之后改变dom元素的状态（这里是input的value改变了），再执行keyup。

这也解释了为什么通过监听keyup事件就能正确且及时的打印出input的值。而keypress事件发生时，dom元素的状态还未改变，keypress事件之后dom元素的状态才发生改变，通过setTimeout延迟执行就能达到期望的结果了。测试过chrome，firefox，ie表现一致。

案例3

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39">
    <ti

最低0.47元/天解锁文章

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js单线程

案例1var fuc = [1,2,3];for(var i in fuc){ setTimeout(function(){console.log(fuc[i])},0); console.log(fuc[i]);}1233 3分析代码结果：虽然setTimeout函数在每次循环的开始就调用了，但是却被放到循环结束才执行，循环结束，i=3,接连打印了3次3。这里涉及到...
复制链接

扫一扫

js单线程

“相关推荐”对你有帮助么？