学前案例:
console.log(111);
setTimeout(function () {
console.log(222);
}, 1000)
console.log(333);
//输出结果:1111 333 222
console.log(111);
setTimeout(function () {
console.log(222);
}, 0)
console.log(333);
//输出结果:111 333 222
1 JS两种运行方式
同步
每条指令都会严格按照他们出现的顺序来执行,而每条指令执行后也能立即获得存储在系统本地(如寄存器或系统内存)的信息
异步
当前进程外部的实体可以触发代码执行
大白话,做一件事情的同时,可以去做别的事情;例如做饭异步,烧水的同时,可以利用间隙去切菜、炒菜
同步任务
同步任务都在主线程上执行,形成一个执行栈(主线程)
异步任务
异步任务存放位置
异步任务会经浏览器异步进程处理,最终添加到任务队列中(也称为消息队列)
异步任务常见
1 普通事件,如click、resize等
2 资源加载,如load、error等
3 定时器,包括setInterval、setTimeout等
4 ajax(网络模块)
2 JS执行机制(重要)
文字版流程
- 首先判断程序中的同步任务、以及异步任务;
- 同步任务会在执行栈中先执行
- 异步任务则会经浏览器处理后,放入任务队列中
- 当同步任务完全执行完后,执行栈会查询任务队列,取出任务队列中罗列好的异步任务来执行
- 重复第4步直到异步也完全执行完毕
事件循环(重要)
执行栈不断从任务队列中获取任务、执行任务、再获取任务、再执行的过程,称为事件循环(event loop)
图片版流程
3 练习题
console.log(111);
setTimeout(function () {
console.log(222);
}, 1000)
console.log(333);
答案:111 333 222
console.log(111)以及console.log(333)两条指令属于同步任务,所以会在执行栈中先执行;
而延时函数属于异步任务,则会在任务队列中等待;当两个同步任务执行完毕后,才会执行延时
函数中的内容