javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的,一切javascript多线程都是纸老虎!
javascript事件循环
js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。
假如我们想浏览新闻,但新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?为了解决这个问题,聪明的程序员将任务分为两类:
- 同步任务
- 异步任务
当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。
而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务。我们用最小的学习成本彻底弄懂执行机制,用导图来说明:
导图要表达的内容用文字来表述的话:
- 同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。
- 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
- 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
- 上述过程会不断重复,也就是常说的Event Loop(事件循环)。
一段代码直白解释的代码:
let data = []; $.ajax({ url:www.javascript.com, data:data, success:() => { console.log('发送成功!'); } }) console.log('代码执行结束');
上面是一段简易的ajax
请求代码:
- ajax进入Event Table,注册回调函数
success
。 - 执行
console.log('代码执行结束')
。 - ajax事件完成,回调函数
success
进入Event Queue。 - 主线程从Event Queue读取回调函数
success
并执行。
通过上面的文字和代码,你对js的执行顺序已经有了初步了解~
接下来我们来研究进阶话题:setTimeout。
setTimeout
先看代码
setTimeout(() => { console.log('延时3秒'); },3000)