标签：计时 结果 精确 logs text click 执行 表示 input
事件处理机制--浏览器流程处理分析
js的运行是单线程的，单线程即一个时间只能做一件事。浏览器的运行是多线程的。
如下三种情况会进入事件队列（任务队列）中，但不立即执行：
1．定时函数
2．事件函数
3．ajax的回调函数（xhr.onreadystatechange = function(){}; //会调用多次）
主线程中先执行非事件队列函数，再执行事件队列函数，事件队列中的事件先进去的先被判断，但不一定先被执行。事件队列中谁先满足条件先执行谁。
事件队列中的任务执行是有条件的：(前提条件：主线程必须是空闲的)
1．定时函数的触发条件（到达延时事件）（延时时间不精确）定时器从放入队列时开始计时，超时的定时函数优先执行
2．事件函数的触发条件（特定的事件发生）
3．Ajax回调函数的触发条件（服务器有数据响应时触发：xhr.readyState状态发生变化时触发）
事件队列中的任务先进先出
先进先出：优先被判断，但不一定优先被执行
举例说明：
1. 定时函数：
<script type="text/javascript"> console.log(1); setTimeout(function(){ console.log(2); }, 0); //0表示以最小延时去执行 var sum = 0; for(var i = 0; i < 100; i++) { sum += i; } console.log(sum); console.log(3); </script>
所以以上代码的输出结果为：
1
4950
3
2
2. 事件函数
<input type="button" value="按钮" id="btn">
<script type="text/javascript">
var btn = document.getElementById(‘btn‘);
console.log(1);
btn.onclick = function(){
console.log(2);
}
console.log(3);
</script>
运行后点击按钮，输出结果为：
1
3
2
3. Ajax回调函数
var xhr = new XHLHttpRequest(); xhr.open(); xhr.send(); console.log(1); var data = null; xhr.onreadystatechange = function(){ console.log(2); data = xhr.responseText; } console.log(data); // data先输出才执行函数,所以应使用回调函数实现 console.log(3);
标签：计时 结果 精确 logs text click 执行 表示 input
原文地址：http://www.cnblogs.com/-lizi/p/7098183.html
