什么是异步

Posted 2021-02-15 mushitianya

先看下面的 demo，根据程序阅读起来表达的意思，应该是先打印100，1秒钟之后打印200，最后打印300。但是实际运营根本不是那么回事。

console.log(100)
setTimeout(function () {
    console.log(200)
}, 1000)
console.log(300)

再对比以下程序。先打印100，再弹出200（等待用户确认），最后打印300。这个运行效果就符合预期要求。

console.log(100)
alert(200)  // 1秒钟之后点击确认
console.log(300)

这两个例子到底有何区别？———— 第一个示例中间的步骤根本没有阻塞接下来程序的运行，而第二个示例却阻塞了后面程序的运行。前面这种表现就叫做异步（后面这个叫做同步）

为何需要异步呢？如果第一个示例中间步骤是一个 ajax 请求，现在网络比较慢，请求需要5秒钟。如果是同步，这5秒钟页面就卡死在这里啥也干不了了。

最后，前端 JS 脚本用到异步的场景主要有两个：

• 定时 setTimeout setInverval
• 网络请求，如 ajax 加载
• 事件绑定（后面会有解释）

ajax 代码示例：

console.log('start')
$.get('./data1.json', function (data1) {
    console.log(data1)
})
console.log('end')

img 代码示例（常用语打点统计）:

console.log('start')
var img = document.createElement('img')
img.onload = function () {
    console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

事件绑定:

console.log('start')
document.getElementById('btn1').addEventListener('click', function () {
    alert('clicked')
})
console.log('end')

同步和异步的区别是什么？分别举一个同步和异步的例子

• 同步会阻塞代码执行，而异步不会。alert是同步，setTimeout是异步

一个关于setTimeout的笔试题

console.log(1)
setTimeout(function () {
    console.log(2)
}, 0)
console.log(3)
setTimeout(function () {
    console.log(4)
}, 1000)
console.log(5)

结果：
1 3 5 2 4

前端使用异步的场景有哪些?

• setTimeout setInterval
• 网络请求
• 事件绑定（可以说一下自己的理解）