由 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
分享到：
相关推荐
### 面试JS考察点详解 #### 1. 原型链 **定义**：JavaScript中的每个函数都有一个`...以上只是JavaScript面试中可能涉及的一些关键知识点，后续还将继续深入探讨其他方面，例如内存泄漏问题、长连接的应用等。
在Node.js环境中，Event Loop（事件循环）是一个至关重要的概念，它使得JavaScript这种单线程的语言能够处理异步操作，从而实现高效的非阻塞I/O。JavaScript引擎在处理任务时，将任务分为两类：同步任务...
xhr.upload.addEventListener('progress', event => { const percentComplete = Math.round((event.loaded / event.total) * 100); console.log(`已上传 ${percentComplete}%`); }); xhr.open('POST', '/upload')...
在JavaScript中，由于其单线程特性，为了处理耗时操作（如读取文件或网络请求），我们通常会采用异步编程，而回调函数就是异步编程的基础。 二、回调函数的工作原理 1. 事件循环：JavaScript引擎通过事件循环机制...
2. **服务端请求**：通过XHR (XMLHttpRequest) 或其他网络请求获取数据，数据加载完成后会更新模型。 3. **定时事件**：如`setTimeout`和`setInterval`，它们会在异步执行的回调函数中更新数据。 由于JavaScript是...