`
yiminghe
  • 浏览: 1431402 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

setTimeout ,xhr,event 线程问题

阅读更多

由   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>

 

 

  • 大小: 328.2 KB
分享到:
评论
2 楼 liuweihug 2014-10-14  
Javascript引擎单线程机制及setTimeout执行原理说明 
http://www.suchso.com/projecteactual/Javascript-setTimeout-timer.html
1 楼 lucane 2009-05-07  
第一段代码
先弹出1的概率好小呃。。。
我试了好些次
都是3>1>2的顺序

相关推荐

Global site tag (gtag.js) - Google Analytics