setTimeout ,xhr,event 线程问题

最新推荐文章于 2021-08-06 02:10:36 发布

iteye_4865

最新推荐文章于 2021-08-06 02:10:36 发布

阅读量185

点赞数

分类专栏： javascript 文章标签： EXT Ajax JavaScript thread IE ViewUI

javascript 专栏收录该内容

127 篇文章 0 订阅

订阅专栏

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