文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何理解JavaScript单线程及setTimeout定时器

2024-04-02 19:55

关注

如何理解JavaScript单线程及setTimeout定时器,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

理解JavaScript的单线程的理念对于JavaScript学习,以及掌握其中的一些设计机制非常重要,比如回调、定时器。对于后续学习NodeJS也有很大的帮助。

通过先demo,后总结的形式,使得JavaScript的单线程更易于明白。

1 var a = 1;  //全局变量a 2 function test(){ 3     var a=2;  //test中变量a 4     setTimeout(function(){ 5         alert(a); //输出test中变量a 6         a=3;  //修改test中变量a 7     },3000); 8     a=4; //修改test中变量a 9     setTimeout(function(){ 10         alert(a); //输出test中变量a 11         a=5; //修改test中变量a 12    },1000); 13    alert(a); //输出test中变量a 14 } 15 test(); //执行test函数 16 alert(a); //输出全局变量a  //运行结果:4 1 4 5    

由此延伸以下代码:

var a = 1; var date = +new Date(); // 小技巧:通过"+"转换为整数 function test(){     var a=2;      setTimeout(function(){         console.log(a+'--'+ (new Date()-date));         a=3;        },3000);     a=4;     setTimeout(function(){         console.log(a+'--'+ (new Date()-date));         a=5;    },1000);    console.log(a+'--'+ (new Date()-date)); } while(new Date-date <1000){  } test(); console.log(a+'--'+ (new Date()-date));  //执行结果:4-1000 1-1001 4-2000 5-4001

结合以下博客,整理一些重要概念:

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

http://www.cnblogs.com/Mainz/p/3552717.html

1、作为脚本语言,JavaScript主要功能是与用户互动,以及操作DOM。假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?  ->So: JavaScript就是单线程。

2、JavaScript的任务分成两种:同步任务和异步任务。同步任务:在主线程上排队执行的任务,只有上一个任务执行完成了,才会执行下一个任务。异步任务:不进入主线程,而进入“任务队列”的任务,只有“任务队列”通知主线程,某个任务队列可以执行了,等主线程执行完成,任务队列才会进入主线程执行。  -> So:只要主线程空了,就会去读“任务队列”,这就是JavaScript的运行机制。

3、主线程从“任务队列”中读取事件,这个过程是循环不断的,所以整个事件又叫“事件循环”(Event Loop)。

HTML5规定setTimeout()的第二个参数的最小值(最短间隔),不得低于4ms,如果低于4ms就会自动增加。在此之前,老版本浏览的都将最短时间设置为10ms。另外,对于那些DOM变动(尤其是设计页面重新渲染的部分),通常不会立即执行,而是每16ms执行一次。这是使用requestAnimationFrame()的效果要好于setTimeout()。

4、需要注意的是:setTimeout只是将事件插入“事件队列”,必须等到前面代码(执行栈)执行完,主线程才会去执行他指定的回调函数。如果当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的是时间执行。

Javascript是单线程,单线程就意味着所有任务需要排队。然后会将所有任务分成两类:同步任务和异步任务!同步任务:在主线程上执行的任务,只有前一个任务执行完成,才会执行后一个!异步任务:不进入主线程、而进入“任务队列”的任务。

Js是单线程的,但是浏览器是多线程的!浏览器是事件驱动的!

JS运行在浏览器中,是单线程的,每个window一个JS线程,但是浏览器不是单线程。可能有多个如下线程:

Javascript引擎线程、界面渲染线程、浏览器事件触发线程、Http请求线程。

setTimeout可以改变,js执行顺序。比如:我们想要输出Hello World,world必须在hello之后输出,不管我们代码的顺序怎么样都输出同样的效果,这个时候就可以借助setTimeout。

//代码一 var date =  +new Date(); console.log('Hello',new Date()-date); setTimeout(function(){      console.log('world',new Date()-date); },500);  //代码二: var date =  +new Date(); setTimeout(function(){      console.log('World',new Date()-date); },500); console.log('Hello',new Date()-date);  //以上两个代码运行结果一样,结果都是:先输出Hello ,然后500ms之后输出World![实际运行:501ms]

浏览器中定时器也是一个线程!

Javscript是单线程的,ajax请求确实是异步的!原因是ajax请求的时候,是在浏览器的Http请求线程中执行的,执行之后的回调函数会放到Javascript线程中执行!

Summary:

Javascript是单线程的,浏览器是多线程的,浏览器的线程包括:JS引擎线程、界面渲染线程、浏览器事件线程、Http请求线程。不过不同的浏览器提供的线程是有区别的。一般JS引擎线程和界面渲染线程是互斥的,两个线程不能同时执行,否则,就会出现界面渲染线程和JS线程修改同一个DOM样式的矛盾问题!

关于如何理解JavaScript单线程及setTimeout定时器问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯