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

Posted 2020-09-26 举个丽子

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

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