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

首页 > 代码库 > 事件处理机制--浏览器流程处理分析

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

2024-10-14 08:29:39 216人阅读

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

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="http://www.mamicode.com/按钮" 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 = http://www.mamicode.com/null;
xhr.onreadystatechange = function(){
    console.log(2);
    data = xhr.responseText;
}
console.log(data); // data先输出才执行函数,所以应使用回调函数实现
console.log(3);

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 事件处理机制--浏览器流程处理分析

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

看完仍有疑问？有类似问题直接问程序猿