彻底弄懂JavaScript执行机制 - 行业资讯 - 肥雀云

不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。因为javascript是一门单线程语言,所以我们可以得出结论:

　　<李> javascript是按照语句出现的顺序执行的李　　　　

看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的:

　　　　　　让一个=' 1 '; 　　console.log(一个); 　　让b=' 2 '; 　　 console.log (b); 　　　　

然而实际上js是这样的:

　　　　　　setTimeout(函数(){ 　　console.log(“定时器开始啦”) 　　}); 　　　　新的承诺(函数(解决){ 　　console.log(“马上执行对循环啦”); 　　(var=0;我& lt;10000;我+ +){ 　　我==99,,解决(); 　　} 　　})(函数(){ 　　console.log(“执行然后函数啦”) 　　}); 　　　　console.log(“代码执行结束”); 　　　　

依照js是按照语句出现的顺序执行这个理念,我自信的写下输出结果:

　　
//倍ㄊ逼骺祭病?br/>//奥砩现葱卸匝防病?br/>//爸葱腥缓蠛病?br/>//按胫葱薪崾比hrome上验证下,结果完全不对,瞬间懵了,说好的一行一行执行的呢?
　　　　
我们真的要彻底弄明白javascript的执行机制了。
　　
　　
1。关于javascriptjavascript是一门单线程语言,在最新的HTML5中提出了素未谋面,但javascript是单线程这一核心仍未改变,所以一切javascript版的“多线”程都是用单线程模拟出来的,一切javascript多线程都是纸老虎!
　　
　　
2. javascript事件循环既然js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。那么问题来了,假如我们想浏览新闻,但是新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?因此聪明的程序员将任务分为两类:
　　
　　<李>同步任务李　　<李>异步任务李　　
　　
当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务。关于这部分有严格的文字定义,但本文的目的是用最小的学习成本彻底弄懂执行机制,所以我们用导图来说明:
　　
　　　　　　　　　　让数据=[]; 　　. ajax({美元　　url: www.javascript.com 　　数据:数据, 　　成功:()=比;{ 　　console.log(“发送成功!”); 　　} 　　}) 　　　　
console.log(“代码执行结束”);上面是一段简易的ajax请求代码:
　　
　　<李> ajax进入事件表,注册回调函数成功。　　<李>执行console.log(“代码执行结束”)。　　<李> ajax事件完成,回调函数成功进入事件队列。　　<李>主线程从事件队列读取回调函数成功并执行。　　
　　
相信通过上面的文字和代码,你已经对js的执行顺序有了初步了解。接下来我们来研究进阶话题:setTimeout。
　　
　　

　　
大名鼎鼎的setTimeout无需再多言,大家对他的第一印象就是异步可以延时执行,我们经常这么实现延时3秒执行:
　　
　　　　　　setTimeout(()=比;{ 　　console.log(“延时3秒); 　　},
彻底弄懂JavaScript执行机制