JS 在客户端运行的时候,只有一个线程可运行,因此想要两件事儿同时干是不可能的。如果没有异步,我们只能同步干,等待过程中卡住了,但是有了异步就没有问题了。那么单线程是如何实现异步的呢?
console.log(100)
setTimeout(function () {
console.log(200)
})
console.log(300)
那上面的示例来说,有以下几点。重点从这个过程中体会单线程这个概念,即事情都是一步一步做的,不能两件事儿一起做。
- 执行第一行,打印100
- 执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行。
- 执行最后一行,打印300
- 待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行。
- 发现暂存起来的setTimeout中的函数无需等待时间,就立即来过来执行
下面再来一个setTimeout的例子。规则和上面的一样,只不过这里暂存起来的函数,需要等待 1s 之后才能被执行。
console.log(100)
setTimeout(function () {
console.log(200)
}, 1000)
console.log(300)
下面再来一个 ajax 的例子。规则也是一样的,只不过这里暂存起来的函数,要等待网络请求返回之后才能被执行,具体时间不一定。
console.log(100)
$.get('./data.json', function (data) {
console.log(200)
})
console.log(300)
最后再解释一下事件绑定,如下代码。其实事件绑定的实现原理和上面的是一样的,也是会把时间暂存,但是要等待用户点击只有,才能被执行。原理是一样的,因此事件绑定在原理上来说,可以算作是异步。但是从设计上来说,还是分开好理解一些。
console.log(100)
$btn.click(function () {
console.log(200)
})
console.log(300)