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是一个单线程语言,为了避免阻塞,所以要使用异步