慕课网《前端JavaScript面试技巧》学习笔记（4）-异步和

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

知识点#####

• 什么是异步（对比同步）

//异步
console.log(100);
setTimeout(function(){
console.log(200);
},1000)
console.log(300);
// 100
// 300
// +1s后 200

//同步
console.log(100);
alert(200)
console.log(300);
//100
//对话框200
//关闭对话框后300

同步会出现阻塞，```alert(200)```不执行结束，后面的代码不会继续执行
- 前端使用异步的场景
在可能发生等待的情况，等待的过程中不能像alert一样阻塞程序运行
  - 定时任务：setTimeout、setInterval
  - 网络请求：ajax请求，动态```<img>```加载
  ```
//ajax请求
console.log('start');
$.get('data/data1.json',function(data1){
console.log(data1);
})
console.log('end');
//start
//end
//数据
  ```
  ```
//图片加载
console.log('start');
var img=document.createElement('img')
img.onload=function(){
console.log('loaded');
}
img.src='images/icon.jpg'
document.body.appendChild(img)
console.log('end');
//start
//end
//loaded
  ```
  - 事件绑定
  ```
console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
console.log('clicked')
})
console.log('end');
//start
//end
//点击打印clicked
  ```
- 异步和单线程
  ```
console.log(100);
setTimeout(function(){
console.log(200);
})  //未设置等待时间
console.log(300);
//100
//300
//200
  ```
- 执行第一行，打印100
- 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时执行两个任务）
- 执行最后一行，打印300
- 待所有任务执行完，处于空闲状态，才执行暂存的任务
- 暂存的setTimeout无等待时间，立即执行

#####解题#####
**1.同步和异步的区别是什么？分别举一个同步和异步的例子**
 - 同步与异步最大的区别是阻塞代码，同步会阻塞代码，而异步不会
 - alert是同步，setTimeout是异步

**2.一个关于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
//+1s后 4

**3.前端使用异步的场景有哪些**
- 定时任务：setTimeout、setInterval
- 网络请求：ajax请求，动态```<img>```加载
- 事件绑定

它们共同的特点是需要等待，由于js是一个单线程语言，为了避免阻塞，所以要使用异步