事件处理机制--浏览器流程处理分析

事件处理机制--浏览器流程处理分析

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

td.linenos { background-color: #f0f0f0; padding-right: 10px }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px }
pre { line-height: 125% }
body .hll { background-color: #ffffcc }
body { background: #f8f8f8 }
body .c { color: #408080; font-style: italic }
body .err { border: 1px solid #FF0000 }
body .k { color: #008000; font-weight: bold }
body .o { color: #666666 }
body .cm { color: #408080; font-style: italic }
body .cp { color: #BC7A00 }
body .c1 { color: #408080; font-style: italic }
body .cs { color: #408080; font-style: italic }
body .gd { color: #A00000 }
body .ge { font-style: italic }
body .gr { color: #FF0000 }
body .gh { color: #000080; font-weight: bold }
body .gi { color: #00A000 }
body .go { color: #888888 }
body .gp { color: #000080; font-weight: bold }
body .gs { font-weight: bold }
body .gu { color: #800080; font-weight: bold }
body .gt { color: #0044DD }
body .kc { color: #008000; font-weight: bold }
body .kd { color: #008000; font-weight: bold }
body .kn { color: #008000; font-weight: bold }
body .kp { color: #008000 }
body .kr { color: #008000; font-weight: bold }
body .kt { color: #B00040 }
body .m { color: #666666 }
body .s { color: #BA2121 }
body .na { color: #7D9029 }
body .nb { color: #008000 }
body .nc { color: #0000FF; font-weight: bold }
body .no { color: #880000 }
body .nd { color: #AA22FF }
body .ni { color: #999999; font-weight: bold }
body .ne { color: #D2413A; font-weight: bold }
body .nf { color: #0000FF }
body .nl { color: #A0A000 }
body .nn { color: #0000FF; font-weight: bold }
body .nt { color: #008000; font-weight: bold }
body .nv { color: #19177C }
body .ow { color: #AA22FF; font-weight: bold }
body .w { color: #bbbbbb }
body .mf { color: #666666 }
body .mh { color: #666666 }
body .mi { color: #666666 }
body .mo { color: #666666 }
body .sb { color: #BA2121 }
body .sc { color: #BA2121 }
body .sd { color: #BA2121; font-style: italic }
body .s2 { color: #BA2121 }
body .se { color: #BB6622; font-weight: bold }
body .sh { color: #BA2121 }
body .si { color: #BB6688; font-weight: bold }
body .sx { color: #008000 }
body .sr { color: #BB6688 }
body .s1 { color: #BA2121 }
body .ss { color: #19177C }
body .bp { color: #008000 }
body .vc { color: #19177C }
body .vg { color: #19177C }
body .vi { color: #19177C }
body .il { color: #666666 }