码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器的事件处理机制

时间:2017-04-22 14:39:34      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:body   浏览器   stat   机制   time   ons   回调   hang   主线程   

 js的运行是单线程的
   一、浏览器在执行的时候会把某些代码放进事件队列
    什么代码会进入事件队列:
    1、定时函数
    2、事件函数
    3、ajax的回调函数
 
    二、事件队列中的任务执行是有条件的:(主线程必须是空闲的)
    1、定时函数的触发事件(到达延时事件)
    2、事件函数的触发条件(特定的事件发生)
    3、ajax回调函数的触发条件(服务器有数据响应:xhr.readyState状态发生变化饿时候出发)
 
1、定时函数
console.log(10);
    for(var i = 0; i <5; i++) {
        setTimeout(function () {
            console.log(i);
        },4000);
    }
    console.log(30);
控制台打印:
10
30
5个3-----主线程结束的后4秒后打印
2、事件函数
 window.onload = function () {
        console.log(10);
        document.getElementById(‘btn‘).onclick = function () {
            console.log(20);
        };
        console.log(30);
 
    };
控制台打印:
10
30
20----点击的时候打印
 3、ajax的回调函数
  var xhr = new XMLHttpRequest();
    xhr.open();
    xhr.send();
    console.log(1);
    var data = null;
    xhr.onreadystatechange = function(){
        console.log(2);
        data = xhr.responseText;
    }
    console.log(data);
    console.log(3);
控制台打印:
1
3
2

浏览器的事件处理机制

标签:body   浏览器   stat   机制   time   ons   回调   hang   主线程   

原文地址:http://www.cnblogs.com/zhushenshen/p/6747434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!