ES5异步和单线程

题目

• 同步和异步的区别是什么？分别举一个同步和异步的例子
• 一个关于setTimeout的笔试题
• 前端使用异步的场景有哪些

知识点

• 什么是异步（对比同步）
• 前端使用异步的场景
• 异步和单线程（js是单线程语言）

//异步示例
console.log(100)
setTimeout(function(){
	console.log(200)
},1000)//正常情况 先打印100，等一秒再打印200，最后打印300
console.log(300)
//实际情况如下
//100
//300
//200

//同步示例
console.log(100)
alert(200)//点击确认才能执行下面的程序（即阻塞程序）
console.log(300)

何时需要异步

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

前端使用异步的场景

• 定时任务：setTimeout ， setInverval
• 网络请求：ajax请求，动态< img >加载
  ajax请求需要等待时间，所有需要异步
• 事件绑定
  绑定事件之后，等待点击事件触发，这也是等待时间

//ajax请求代码示例
console.log('start')
$.get('.data1.json', function(data1){
	console.log(data1)
})//ajax请求，不知道什么时候回来，也不知道服务器是否挂了
console.log('end')
//实际情况：先start然后end 最后是 ajax请求的返回值

//<img>加载示例
console.log('start')
var img = document.createElement('img')
img.onload = function(){
	console.log('loaded')
}
img.src = '/xxx.png'//不知道这个链接什么时候加载完，也不知道路径对错
console.log('end')
//实际情况，先打印start然后end最后等加载完之后打印loaded

//事件绑定示例
console.log('start')
ducoment.getElementById('btn1').addEventListener('click',function(){alert('clicked')})//不知道用户何时点击（等待用户点击）
console.log('end')
//实际情况：先打印start后打印end，当点击时候才弹出clicked

等待需要用到异步，因为等待的时候，不知道会不会阻塞，不知道会不会卡死

• js为什么需要异步，是因为js是单线程的语言

console.log(100)
setTimeout(function(){
	console.log(200)
})//这里没加时间限制，虽然没加时间，但setTimeout是个异步，把setTimeout里的函数拿出来等着
//所有的异步都会被单独拿出去，等待执行
console.log(300)
//100
//300
//200

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

console.log('start')
$.get('/data1.json',function(data1){
	console.log(data1)//这个没有时间限制，函数先暂存起来，等数据回来了，才能执行，什么时候回来，什么时候执行
})
console.log('end')
//start
//end
//data1

console.log('start')
document.getElementById('btn1').addEventListener('click',function(){alert('clicked')})//先把异步的函数暂存起来，什么时候点击，什么时候执行
//点一次弹一次，可以点多次，可以用单线程理解点击事件
console.log('end')
//start
//end

解答

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

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

一个关于setTimeout的笔试题

console.log(1)
setTimeout(function(){console.log(2)},0)//0和不写是一样的
console.log(3)
setTimeout(function(){console.log(4)},1000)
setTimeout(function(){console.log(10)},500)//异步队列里先看时间长短，也不会出现阻塞
console.log(5)
//1
//3
//5
//2
//10
//4

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

• 定时任务： setTimeout ， setInterval
• 网络请求： ajax请求，动态< img > 加载
• 事件绑定
  以上三种场景的特点都是——等待

重点总结

异步和同步的区别

异步和单线程的关系

异步和前端的应用场景