|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-04-30
最后修改：2010-05-30
由 http://lifesinger.org/blog/?p=1568
所想
1. javascript 是单线程的，其实只有 xhr是新开了一个线程而已。
第一段代码：
setTimeout(function () {
alert(1);
},
0);
setTimeout(function () {
alert(2);
},
0);
Ext.ajax.request({
url: 'xx.不存在',
failture: function () {
alert(3);
}
});
alert : 会阻塞当前线程
则会先弹出1(不要点确定)，等会弹出3，而2只有点击 1,3 都确定后才会弹出
第二段代码：
setTimeout(function () {
for (var i = 0; i < 2000; i++)
console.log(' main thread ' + i);
},
0);
setTimeout(function () {
for (var i = 0; i < 1000; i++)
console.log(' main thread-2 ' + i);
},
0);
Ext.ajax.request({
url: 'xx.不存在',
failture: function () {
alert(3);
for (var i = 0; i < 100; i++)
console.log(' sub thread ' + i);
alert(4);
}
});
则会 先打印main thread 0,main thread 1,.... 还没到
main thread
1999
时 就 alert(3) ,点确认后
alert(4) ,
注意其间
main thread 打印 一直没停，
一直
到 main thread 1999 , 然后 main thread-2 0
main thread-2 1
一直到
main thread-2 999
,然后 才是 sub thread 0 ....sub thread 99 ,可见只有 ajax 的回调 alert 先弹出了 (与alert 顺序无关)，他后面的操作 放在 javascript单线程事件 队列里面
------------------------------------------总结一下 可能不太对， 第二段代码 在 ff 中表现如上，在ie 中 装了 Companion.JS,但是不太准确（打印了3000个log后才弹出alert(3)）
故：看见 alert 操作很特殊 可能与事件队列无关，ajax 是新开一个线程 ，返回时，处理函数放在javascript 事件队列的末尾，但里面的 alert 不管顺序挨各先执行.(对应第二段代码)
ajax 回调的alert 可插在 原先的 alert 后面 ，而 原先alert后面的alert 则要等 ajax 回调的alert 点击确定后才能执行。 (对应第一段代码)
2.ie element 的事件添加为 栈 先进后出，其他浏览器为 队列 后进后出，不过 setTimeout 都一样的，把定时运行函数放在当前所有操作的最后处理。
测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>singleThread 测试</title>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-core.js"></script>
<script type="text/javascript">
//<![CDATA[
var no=0;
Ext.onReady(function() {
Ext.get('t').on('click',function(){
setTimeout(function(){
alert('first click timeout ok');
},0);
alert('first click');
Ext.getDom('debug').innerHTML+=1+'<br />'
});
Ext.get('t').on('click',function(){
alert('second click');
Ext.getDom('debug').innerHTML+=2+'<br />'
});
});
//]]>
</script>
</head>
<body>
<input type='button' id='t' value='click me please' />
<div id='debug'>
</div>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-05-07
第一段代码
先弹出1的概率好小呃。。。 我试了好些次 都是3>1>2的顺序 |
| 返回顶楼 | |
浏览 2116 次
