异步操作

1.单线程模型

单线程模型指JavaScript只在一个线程上运行。即，JS同时只能执行一个任务，其它任务都必须在后面排队等待。
注意，JS只在一个线程上运行，不代表JS引擎只有一个线程。JS引擎有多个线程，单个脚本只能在一个线程上运行（称为主线程），其它线程都在后台配合。

(1).JS为什么采用单线程，而不是多线程？

多线程需要共享资源、且有可能修改彼此的运行结果。举例来说，如果JS同时有两个线程，一个线程在网页DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个为准？ 因此，为了避免复杂性，JS一开始就是单线程

(2).单线程模型的优缺点：

优点：实现简单、执行环境相对单纯
缺点：假如某个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。
JS语言本身并不慢，慢的是读写外部数据，比如Ajax请求返回结果。这时，如果对方服务器迟迟没有响应，或者网络不通畅，会导致脚本的长时间停滞。

2.事件循环机制（Event Loop）

IO操作（输入输出）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。
JavaScript 语言的设计者意识到，这时 CPU 完全可以不管 IO 操作，挂起处于等待中的任务，先运行排在后面的任务。等到 IO 操作返回了结果，再回过头，把挂起的任务继续执行下去。这种机制就是 JavaScript 内部采用的“事件循环”机制（Event Loop）。

为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制，且不得操作 DOM。所以，这个新标准并没有改变 JavaScript 单线程的本质。

2.同步任务和异步任务

程序里所有的任务，可以分成两类：同步任务 和 异步任务

(1).同步任务：指那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务

(2).异步任务：指那些被引擎放在一边，不进入主线程而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如Ajax操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束，会马上运行，即异步任务不具有"阻塞"效应。

console.log(1);
setTimeout(()=>{
  console.log(2);
},1000)
console.log(3);
//1
//3
//2

3.任务队列和事件循环

JS运行时，除了一个正在运行的主线程，引擎还提供一个任务队列，里面是各种需要当前程序处理的异步任务。（实际上，根据异步任务的类型，存在多个任务队列。为了方便理解，这里假设只存在一个队列。）
首先，主线程会去执行所有的同步任务。等到同步任务全部执行完，就会去看任务队列里面的异步任务。如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就变成同步任务了。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。
异步任务的写法通常是回调函数。一旦异步任务重新进入主线程，就会执行对应的回调函数。如果一个异步任务没有回调函数，就不会进入任务队列，也就是说，不会重新进入主线程，因为没有用回调函数指定下一步的操作。
JavaScript 引擎怎么知道异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。这种循环检查的机制，就叫做事件循环（Event Loop）。

4.异步操作的解决方案

(1).回调函数

function f1(){
  setTimeout(()=>{
    console.log(1)
  },1000)
}
function f2(){
  console.log(2)
}
f1();
f2();

上面的代码会先打印出2 再打印1 即f2先执行再执行f1
如何才能先执行f1 再执行f2呢？ 通过回调函数，把f2写成f1的回调函数

function f1(callback){
  setTimeout(()=>{
    console.log(1)
    callback();
  },1000)
 
}
function f2(){
  console.log(2)
}
f1(f2);

(2).

5.定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

1.setTimeout()

1.setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timeId = setTimeout(func | code,delay);
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2
注意，console.log(2)必须以字符串的形式，作为setTimeout的参数。

2.如果推迟执行的是函数，就直接将函数名，作为setTimeout的参数。

function f() {
  console.log(2);
}

setTimeout(f, 1000);

3.setTimeout的第二个参数如果省略，则默认为0

setTimeout(f)
//等同于
setTimeout(f,0)

4.除了前两个参数，setTimeout还允许更多的参数，它们依次传入推迟执行的函数（回调函数）

setTimeout(function(a,b){
  console.log(a+b)
},1000,1,1)

5.for循环与setTimeout

for(var i=0;i<10;i++){
  setTimeout(function(){
      console.log(i)   
  },3000)
}
3s后打印出 10个10，setTimeout是异步任务需要在任务队列中等待同步任务执行完毕，即for循环执行完毕后i是10。

如何取到正确的i值？

(1).通过setTimeout的参数
    for(var i = 0;i<10;i++){
         setTimeout(function(i){
                console.log(i)
         },3000,i)  //通过setTimeout的其它参数向回调函数内传递
   }
上面代码，3s后连续打印出 0,1,2,3,4....9

如何每隔3s依次打印？
  for(var i = 0;i<10;i++){
         setTimeout(function(i){
                console.log(i) //每隔3s依次打印
 },3000*i,i)  
(2). 函数的作用域链？？？？需要看
function f(a){
  setTimeout(function(){
    console.log(a)
  },3000*a)
}
for(var i=0;i<10;i++){
  f(i)
}
(3).使用es6中的let
for(let i = 0;i<10;i++){
         setTimeout(function(){
                console.log(i)
         },3000)  
   }
(4).通过立即执行函数
for(var i=0;i<10;i++){
  (function(e){
    setTimeout(function(){console.log(e)},0)
  })(i)
}