异步

问题

单线程概念，与异步的关系
event-loop的概念
Promise的基本原理与使用
async/await（与Promise的区别与联系 ES7）
总结当前JS解决异步的方案

知识点

单线程

只有一个线程，同一时间只能做一件事

原因

避免DOM渲染的冲突

JS可以修改DOM解构

JS执行的时候，浏览器DOM渲染会暂停

两段JS也不能同时执行

webworker支持多线程，但是不能访问DOM

解决方案

异步

问题
没有按照书写顺序执行，可读性差

callback不容易模块化

与异步的关系

同步会阻塞代码运行，异步不会

setTimeout

for(var i = 0; i< 5;i++){
setTimeout((function(i){   
    console.log(i)
    })(i), i*1000);
}
// 0 1 2 3 4

使用异步的场景

（需要等待的时候）

定时任务 setTimeout,setInterval

绑定事件 addEventListener（click等等）

网络请求 ajax和img动态加载

event-loop

概念

事件轮询，JS实现异步的具体解决方案

过程

同步代码，直接执行

异步函数先放在异步队列中

同步函数执行完毕后，轮询执行异步队列的函数

实例分析与源码

1 setTimeout无延时

setTimeout(function() {
    console.log(100)
})                          //异步队列
console.log(200)            //主进程

2 setTimeout有延时

setTimeout(function() {
    console.log(1)
}, 100)                     //异步队列 100ms后放入

setTimeout(function() {
    console.log(2)
})                          //异步队列 立刻被放入

console.log(3)              //主进程

3 ajax

$.ajax({
    url: './data.json',
    success: function () {
    console.log('a')        //ajax加载完成时放入,时间不可确定
    }
})
setTimeout(function () {
    console.log('b')
}, 100)                     //100ms 后放入
setTimeout(function () {
    console.log('c')        //立即放入
        })
console.log('d')

//d c a b or d c b a

异步

问题

知识点

单线程

单线程

单线程

原因