我们都知道,JS是一门单线程的编程语言,也就是说,js一次只能执行一次任务,多个任务只能一个一个的执行,当前面的任务执行完毕之后,才能够执行下一次任务。这也是js的执行机制,它并不能一次性处理多个任务,因此被称为单线程的编程语言。
但是,随着复杂业务的不断出现,简单的单线程就不能满足这些业务的实现,于是在HTML5时,就提出了web worker标准,允许js能同时创建多个线程,于是,在js中就有了同步和异步的概念。
同步
前一个任务执行完毕之后才能执行后一个任务,程序的执行顺序和任务的顺序是同步的。
异步
前一个任务执行时,它有可能比较耗时,因此可以在执行前一个任务执行期间,继续执行后面的任务,当后面的任务执行完毕再次回来执行这个任务。
它们本质的区别就是任务的执行顺序不同。
JS的执行机制
JS在执行代码时,会把所有的同步任务放到一个执行栈里面去,当遇到异步任务时,就会把异步任务放到异步任务队列中,下面是一些常见的异步任务:
- 普通的事件回调函数
- 定时器函数
下面以一段代码作为演示:
console.log(111)
console.log(222)
setTimeout(function () {
console.log(333)
}, 0)
console.log(444)
输出的结果为:
因为定时器函数属于异步任务,因此,浏览器把该函数放到了异步队列中,待所有的同步任务执行完毕之后,再次回到队列中查看是否存在待执行的任务,发现有一个,则执行放到执行栈中执行,执行完毕之后,再次查看,发现任务队列已经没有其他待执行的任务,即可结束,这个流程称之为事件循环(event loop)
console.log(1)
document.addEventListener('click', function () {
console.log(2)
})
console.log(3)
setTimeout(() => {
console.log(4)
}, 0)