问题
1.同步和异步的区别是什么？分别举一个同步和异步的例子
2.一个关于setTimeout的笔试题
3.前端使用异步的场景有哪些
知识点
1: 什么是异步?
2: 前端使用异步的场景有哪些?
3: 异步和单线程
1: 什么是异步?
先看下面两个例子
console.log(100);
setTimeout(function() {
console.log(200)
},2000);
console.log(300)
// 100
// 300
// +2s后 200
异步不会阻塞后面代码的执行,上述代码中会先打印100,然后打印300,延时加载的内容会在一秒后,最后打印出来,代码不会在打印了100后等待两秒,再打印300
对比同步
console.log(100);
alert(200); // x 秒后点击确认
console.log(300);
同步会阻塞后面代码的执行,上述代码中,alert后如果不点击确认就不会执行后面的代码
何时需要异步?- 在可能发生等待的情况(在等待过程中我们需要继续去做我们需要做的事情,不能让它卡在这儿)
- 在等待过程中不能像alert一样阻塞程序的运行
- 因此所有等待的情况都需要异步
2: 前端使用异步的场景
- 定时任务 : setTimeout , setInterval
- 网络加载 : ajax 的请求 , 动态< img >加载
- 事件绑定 : 绑定一个点击事件后,用户什么时候点不知道,但是在用户点击之前,后面的代码该干嘛还得干嘛,不能因为用户没有点击而卡在那儿
ajax 请求代码示例
console.log('start');
$.get("test.json",function(data){
console.log(data)
});
console.log('end')
//执行结果:
//100
//300
//[Object { url="www.jianshu.com"}]
img 加载示例
console.log('start')
var img = document.createElement("img");
img.onload = function() {
console.log('loaded')
}
img.src = 'loading7.gif'
console.log('end')
//执行结果:
//start
//end
//loaded
事件绑定示例
console.log('start')
document.addEventListener('click',function(){
alert('clicked')
})
console.log('end')
3: 单线程
JavaScript 是单线程执行的语句
什么是单线程 : 就是一次只能干一件事(执行一个语句),一个一个排队来,不能将所有语句同时执行
例子 :
console.log(100);
setTimeout(function() {
console.log(200)
}); // 这里没有设置加载时间
console.log(300)
// 执行的顺序 100; 300; 200
执行顺序解释: 首先打印出 100;然后执行到 setTimeout 时;因为它是异步,会先将它给拎出来放到一边,然后再执行下面的,打印出300,然后再将刚拎出来的 setTimeout 执行;
1: 执行第一行,打印100
2: 执行 setTimeout 后,传入setTimeout 的函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)
3: 执行最后一行,打印 300
4: 待所有程序执行完后,处于空闲状态时,会立马看有没有 暂存起来的要执行.
解题:
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 >加载
- 事件绑定 : 绑定一个点击事件后,用户什么时候点不知道,但是在用户点击之前,后面的代码该干嘛还得干嘛,不能因为用户没有点击而卡在那儿
上面场景使用异步的共同特点:都要等待的时间,有等待就有卡顿,所以要用到异步
