JS中异步和单线程

时间:2022-08-24 23:06:42

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)