JS异步与单线程

异步

知识点

• 什么是异步（与同步比，有什么区别）

//异步
console.log(100);
setTimeout(function(){
    console.log(200);
},1000);
console.log(300);
//结果
//先打印100，再打印300，1s之后再打印200

异步遇到时间的问题，它不会阻塞代码的执行，它会先等待，等其他执行完了后再执行

//同步
console.log(100);
alert(200);//一段时间后点击确认
console.log(300);

同步会有阻塞，它会阻塞下面代码执行

• 前端使用异步的场景，为什么要使用异步

  何时需要异步：
  在可能发生等待的情况中，等待过程中不能像alert一样阻塞程序运行，即，所有‘等待的情况’都需要异步。

  • 定时任务：setTimeout,setInverval;
  • 网络请求：ajax请求，动态< img >加载;
  • 事件绑定

//ajax请求
console.log('start');
$.get('./data1.json',function(data1){
    console.log(data1);
});
console.log('end');
//ajax请求
//开始打印start，因为不知道什么时候能请求到数据，所以等待ajax请求，直接去打印end

 //动态img加载
console.log('start');
var img = document.creatElement('img');
img.onload = function(){  //等待图片加载
    console.log('load');
}
img.src = './xxx.png';
console.log('end');


//事件绑定
console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
    alert('clicked');//不知道用户什么点击，所以需要等待
});
console.log('end');

比如，在做了一个绑定的点击事件，但是不一定在代码执行的时候点击触发这个实际，所以，就让它等待，继续执行下面的代码。

相关题目

• 同步与异步的区别是什么，分别举一个同步和异步的例子
  
  • 同步会阻塞代码，而异步不会
  • alert是同步，setTimeout是异步
• 一个关于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

• 前端使用异步的场景有哪些

  见上

单线程

知识点

• 单线程每次只能做一件事，如果有很多事的时候，需要一个一个的执行。（js是一个单线程的语言）

console.log(100);
setTimeout(function(){
    console.log(200);
},1000);
console.log(300);
//执行第一行，打印100；
//执行setTimeout后，传入setTimeout的函数会先被封闭起来，1s之后解封，然后才能执行（单线程的特点，不能同时干两件事）
//执行最后一行，打印300
//待所有程序执行完，处于空闲状态是，会立马查看有没有暂存起来的事件要执行
//发现暂存起来的setTimeout中的函数无需等待事件，就立即拿来执行

console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
    alert('clicked');
});
console.log('end');
//事件绑定与之前的例子不同的是，会点一次执行一次

知识点更深入的了解

推荐这个文章

说到js的单线程（single threaded）和异步（asynchronous），很多同学不禁会想，这不是自相矛盾么？其实，单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。往下看，你会发现js的机制是多么的简单高效！

有关单线程与异步更详细的概念和原理