手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >浅谈Javascript线程及定时机制
浅谈Javascript线程及定时机制
摘要:这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下setTimeout、setInterval的使用J...

这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下

setTimeout、setInterval的使用

Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行。但随着工作经验的积累,我们发现事实并非如此。

比如

?

1 2 3 4 5 div.onclick=function(){ setTimeout(function(){ document.getElementById('input').focus(); },0); }

就解释不通了,立即执行就立即执行呗,干嘛还要设置个定时兜个圈子呢。

又有一天你写了下面一段代码

?

1 2 setTimeout(function(){while(true){}},100); setTimeout(function(){alert('你好');},200);

第一行代码死循环,结果造成第二行alert始终没有出现,为啥哩?

单线程or多线程?

原来,Javascript引擎是单线程运行的,浏览器只有一个线程在运行JavaScript程序。因为单线程的设计,所以免去了复杂的多线程同步问题。

当设置一个定时的时候,浏览器会在设定的时间后将你指定的回调函数插入任务序列,而非立即执行。如果设定定时时间为0,表示立即插入任务序列,而不是立即执行,仍然要等队列中任务执行完毕,轮到你,你才执行。

所以下面代码先弹出2,再弹出1

?

1 2 3 4 setTimeout(function(){ alert(1); },0); alert(2);

那么,这又有什么实际用途呢?且看下面示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 !DOCTYPE html meta charset=utf-8 meta name=viewport content=width=device-width,initial-scale=1.0 titlesetTimeout 0/title /head 输入字符,但内容却不能实时显示input type=text onkeydown=show(this.value) 输入字符,内容能实时显示input type=text onkeydown=var self=this;setTimeout(function(){show(self.value)},0) script function show(val){ document.getElementsByTagName(div)[0].innerHTML=val; } /script /body /html

这个例子中,js引擎需要执行keydown事件处理程序,然后更新输入框的value值。事件处理程序执行时,更新value的任务只能进入队列等待,所以keydown事件执行时无法得到更新后的value值;但通过setTimeout我们把取value的操作放入队列,并在更新value之后执行,所以内容就能实时显示了。

再回来看看下面的代码:

?

1 2 3 4 5 6 7 8 setTimeout(function(){ //do something... setTimeout(arguments.callee,10); },10); setInterval(function(){ //do something... },10);

这两段代码看起来效果一样,是不是。其实还是有区别的,第一段的回调函数内的setTimeout是js引擎执行后再设定的新的定时,假定从上一个回调处理完到下一个回调开始为一个时间间隔,理论上时间间隔=10ms,后一段代码=10ms。

说到这儿,那XMLHttpRequest是不是真的异步呢?是的,请求是异步的,不过这请求是浏览器新开的一个线程。当请求的状态变更时,如果先前已设置回调,异步线程就将状态变更事件放入js引擎处理队列中等待处理,当任务被处理时js引擎始终还是单线程地执行onreadystatechange所设置的函数的。

以上所述就是本文的全部内容了,希望大家能够喜欢。

【浅谈Javascript线程及定时机制】相关文章:

浅谈javascript中的闭包

Javascript动态创建表格及删除行列的方法

javascript实现模拟时钟的方法

浅析JavaScript中的事件机制

浅谈javascript事件取消和阻止冒泡

javascript实现炫酷的拖动分页

Javascript技术栈中的四种依赖注入详解

JavaScript中用getDate()方法返回指定日期的教程

javascript实现获取服务器时间

JavaScript中继承用法实例分析

精品推荐
分类导航