JS中异步和单线程

Posted 2021-02-14 木石天涯

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)