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