【JS面试】第五章 异步和单线程

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

什么是异步（对比同步）

判断有没有阻塞

• 异步：无阻塞，我走个人，走完以后回来再说，等着执行，可是不卡在那儿，等着但不闲着

console.log(100)
setTimeout(function () {
  console.log(200) // 未阻塞，没有在这儿停顿1s并打印200
}, 1000)
console.log(300)
// 100 300 200

• 同步：有阻塞，会阻塞下面代码的执行

console.log(100)
alert(200) // 1秒后点击确认
console.log(300)

前端使用异步的场景

在可能发生等待的状况，等待过程当中不能像alert同样阻塞程序运行，所以，全部的等待状况都须要异步

• 定时任务：setTimeout、setInverval
• 网络请求：Ajax请求（请求Google CDN），动态<img>加载

// Ajax请求demo
console.log('start');
$.get('./data1.json', function (data1) {
  console.log(data1);
});
console.log('end');
// start end 等待Ajax执行

// <img>加载demo
console.log('start');
var img = document.createElement('img');
img.onload = function () {
  console.log('loaded');
};
img.src = '/xxx.png';
console.log('end');
// start end 等待图片加载

• 事件绑定
  可执行屡次，能够点击再点击，而前2个场景只能执行1次

// 事件绑定demo
console.log('start');
document.getElementById('btn1').addEventListener('click', function () {
  alert('clicked');
});
console.log('end');
// start end 等待元素点击事件发生

异步和单线程的实现原理

执行顺序demo

console.log(100)
setTimeout(function () {
  console.log(200)
})
console.log(300)

1. 执行第一行，打印100
2. 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会当即执行
   单线程的特色，不能同时干两件事
3. 执行最后一行，打印300
4. 待全部程序执行完，处于空闲状态时，会立马看有没有暂存起来的任务要执行
5. 发现暂存起来的setTimeout中的函数无需等待时间，就当即来过来执行

执行顺序原理

• 全部异步中的函数都会被拿出去暂时不执行，让它们等待

1. 全部的异步都是有函数的
2. 只是暂存，并不排成队列

• 全部同步任务执行完后，要看边上有没有等待的程序在执行
• 全部异步等待的任务，同时判断是否知足如下条件，无论排队或者代码书写前后

1. 是否有等待时间
2. 发送的请求是否正确返回
3. 绑定事件是否发生

• 如有，则被封禁，等待时间发生时解禁执行异步任务
• 若无，则一直处于解禁状态，直接执行等待的异步任务

什么是单线程

• 单线程一次只能干一件事，只能一个一个任务排队来，不能同时执行两个任务
• JavaScript是单线程的，可是又不能让程序阻塞卡顿，因此必须异步

题目解答

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、setInverval
• 网络请求：Ajax请求、动态<img>加载
• 事件绑定