javascript中的同步与异步机制

墨蓝 2022-12-07 13:18 193阅读 0赞

思考题:

> 以下代码的输出顺序是什么;

console.log(1);
           setTimeout(function(){ 
               console.log(3);
           },1000); 
           console.log(2);

输出结果  
1  
2  
3

## 同步 ##

> 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。。  
> 同步任务都在**主线程**上执行，形成一个执行栈

## 异步 ##

> 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法  
> 一般而言，异步任务有以下三种类型:  
> 1、普通事件，如 click、resize 等  
> 2、资源加载，如 load、error 等  
> 3、定时器，包括 setInterval、setTimeout 等  
> 异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

> 他们的本质区别： 这条流水线上各个流程的执行顺序不同。

上面的代码顺序是先执行 `console.log(1);` 然后执行`console.log(2);`  
至于`setTimeout(function(){})`函数因为是异步任务,所以他先添加到任务队列中,  
等同步任务结束以后,系统将读取任务队列中的任务执行;这是事件循环（ `event loop`）

## 事件循环（ `event loop`） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70_pic_center]  
作业:

console.log(1);
        document.onclick=function(){ 
            console.log("click");
        }
        console.log(2);
        setTimeout(function(){ 
            console.log(3);
        },0);

输出顺序

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9e2eb77394fd40a5967db67d6d8f6c56.png