异步编程

同步和异步

同步：按顺序执行任务

异步：一般会有回调函数。再调用之后先不管回调函数，继续执行下一个任务。等到事件触发再执行回调函数。

同步示例

执行如下代码，输出结果为： 1 2 3

var syncTest = () => {
    let t = +new Date();
    while(true) {
        if(+new Date() - t >= 2000){
        console.log(2);
            break;
        }
    }
}
console.log(1);
syncTest();
console.log(3);

异步示例

执行如下代码，输出结果为： 1 3 2

var asyncTest = () => {
    setTimeout(()=>{
        console.log(2);
    }, 2000);
}
console.log(1);
asyncTest();
console.log(3);

javascript单线程

单线程的js怎么实现异步？

答：通过浏览器内核多线程实现js异步编程。

graph TD
浏览器的进程Chromium -->浏览器进程
浏览器的进程Chromium -->渲染进程
浏览器的进程Chromium -->GPU进程
浏览器的进程Chromium -->网络进程
浏览器的进程Chromium -->插件进程
渲染进程 -->|GUI线程|渲染布局
渲染进程 -->|js引擎线程|解析/执行js,并且与GUI线程互斥
渲染进程 -->|定时触发器线程|setTimeout,setInterval
渲染进程 -->|事件触发线程|将满足触发条件事件放入任务队列
渲染进程 -->|异步http请求线程|XHR请求所在线程

js异步场景

1. 定时器 定时任务可能不会按时执行。这是由于当回调函数触发后放入任务队列，但是js执行栈需要先将其他优先级高的任务执行之后，再从任务队列取出来后执行。所以回调函数可能真正被执行的时间会大于所设的定时时间。

定时器嵌套5次之后最小间隔不能低于4ms

2. 网络请求
3. 事件绑定
4. Es6 Promise