javascript考点 —— 异步和单线程

一、什么是异步？

如下就是一个简单的异步：

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

//打印顺序100 300 200

异步和同步最大的区别在于有没有阻塞程序的进行：上面这种情况就没有阻塞程序的进行，程序也没有出现卡顿。如果是同步的，那么就会打印完100，等待1000ms，打印出200，然后才会打印出300.来看如下程序 就是一个同步：

console.log(100)
alert(200)
console.log(300)
//弹出200后，如果不点击确认，程序就会卡在那里，只有等点击了确认，程序才会继续执行

什么时间需要异步？

• 在可能发生等待的情况下
• 等待过程中不能像alert一样阻塞程序运行
• 因此，所有的‘等待情况’都需要异步

二、前端使用异步的场景：

• 定时任务：setTimeout、setIterval
• 网络请求：ajax请求、动态<img>加载

//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')

三、异步和单线程

1、什么是单线程？

console.log(100)
setTimeout(function() {
    console.log(200)
})
console.log(300)
/打印顺序，100， 300， 200

怎么实现的上述打印顺序呢？

• 执行第一行，打印100
• 执行setTimeout后，传入setTimeout函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
• 执行最后一行，打印300
• 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行
• 发现暂存起来的setTimeout中的函数无需等待时间，就会立即过来执行

单线程就是一次只能做一件事情，一个个排队的，不能一块执行两个。

四、题目解答

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

解答：同步会阻塞代码执行，而异步不会。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

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

解答：定时任务、网络请求、事件绑定