setTimeout,xhr,event线程问题

最新推荐文章于 2021-05-23 20:41:53 发布

xiaobai251206725

最新推荐文章于 2021-05-23 20:41:53 发布

阅读量573

点赞数

分类专栏： js ajax 文章标签： function thread javascript ajax button xhtml

本文链接：https://blog.csdn.net/xiaobai251206725/article/details/5978063

版权

js 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

由 http://lifesinger.org/blog/?p=1568 所想

1. javascript 是单线程的，其实只有 xhr是新开了一个线程而已。

第一段代码：

Js代码

setTimeout( function () {
alert(1);
},
0);
setTimeout(function () {
alert(2);
},
0);
Ext.ajax.request({
url: 'xx.不存在' ,
failture: function () {
alert(3);
}
});

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 都确定后才会弹出

第二段代码：

Js代码

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);
}
});

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 都一样的，把定时运行函数放在当前所有操作的最后处理。

测试代码：

Html代码

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

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

转自：http://yiminghe.javaeye.com/blog/377549

xiaobai251206725

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
setTimeout,xhr,event线程问题

由 http://lifesinger.org/blog/?p=1568 所想1. javascript 是单线程的，其实只有xhr是新开了一个线程而已。第一段代码： Js代码 setTimeout(function () { alert(1); }, 0); setTimeout(function () { alert(2); }, 0); Ext.ajax.request({ url: 'xx.不存在', failture: funct
复制链接

扫一扫

专栏目录