前端之家收集整理的这篇文章主要介绍了
浅谈Javascript线程及定时机制,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
setTimeout、setInterval的使用
Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行。但随着工作经验的积累,我们发现事实并非如此。
比如
就解释不通了,立即执行就立即执行呗,干嘛还要设置个定时兜个圈子呢。
又有一天你写了下面一段代码
第一行代码死循环,结果造成第二行alert始终没有出现,为啥哩?
单线程or多线程?
原来,Javascript引擎是单线程运行的,浏览器只有一个线程在运行JavaScript程序。因为单线程的设计,所以免去了复杂的多线程同步问题。
当设置一个定时的时候,浏览器会在设定的时间后将你指定的回调函数插入任务序列,而非立即执行。如果设定定时时间为0,表示立即插入任务序列,而不是立即执行,仍然要等队列中任务执行完毕,轮到你,你才执行。
所以下面代码先弹出2,再弹出1
那么,这又有什么实际用途呢?且看下面示例
<
Meta charset="utf-8">
<
Meta name="viewport" content="width=device-width,initial-scale=1.0">
setTimeout 0
输入字符,但
内容却不能实时
显示
输入字符,
内容能实时
显示
这个例子中,js引擎需要执行keydown事件处理程序,然后更新输入框的value值。事件处理程序执行时,更新value的任务只能进入队列等待,所以keydown事件执行时无法得到更新后的value值;但通过setTimeout我们把取value的操作放入队列,并在更新value之后执行,所以内容就能实时显示了。
说到这儿,那XMLHttpRequest是不是真的异步呢?是的,请求是异步的,不过这请求是浏览器新开的一个线程。当请求的状态变更时,如果先前已设置回调,异步线程就将状态变更事件放入js引擎处理队列中等待处理,当任务被处理时js引擎始终还是单线程地执行onreadystatechange所设置的函数的。