《前端JavaScript面试技巧》学习笔记（4）异步和单线程

问题

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 >加载
• 事件绑定 : 绑定一个点击事件后,用户什么时候点不知道,但是在用户点击之前,后面的代码该干嘛还得干嘛,不能因为用户没有点击而卡在那儿

上面场景使用异步的共同特点:都要等待的时间,有等待就有卡顿,所以要用到异步

---