js的事件循环是js的一种执行机制。
众所周知,js是一门单线程的语言,也就是同步的,同一时间只能做一件事情。这是因为浏览器仅分配给了js一个主线程来执行任务,且一次只能执行一个任务。这些待执行的任务排好队伍,依次执行。
但是js某些任务是需要耗时的,例如定时器和ajax的请求操作,HTML5为实现这些任务允许js脚本创建多个线程。于是js中既有同步又有异步了。
同步任务:同步任务都在主线程上执行,形成一个执行栈
异步任务:异步任务通过回调函数实现,异步任务被添加到了任务队列中
一旦同步任务都执行完毕,系统就会依次读取任务队列中的任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
浏览器会反复读取任务队列中的任务,逐个完成任务队列中的任务。这一过程就被称为事件循环。
例如以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(1) //首个执行
console.log(2) //第二个执行
setTimeout(function(){
console.log(3) //等待10ms后执行,第五个执行
},10)
setTimeout(function(){
console.log(4) //等待1ms后执行,第四个执行
},1);
console.log(5) //第三个执行
//打印结果:1 2 5 4 3
</script>
</body>
</html>
打印结果:1 2 5 4 3
补充:一般而言,异步任务有以下三种类型:
普通事件:click、resize等
资源加载:load、error等
定时器:setInterval、setTimeout等