介绍JS异步的执行原理和回调方法

　　介绍

本篇内容介绍了“介绍JS异步的执行原理和回调方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、JS异步的执行原理

? ?我们知道JavaScript是单线程的,而浏览器是多线程的。单线程执行任务需要一个个排队进行,假如一个任务需要很长时间执行(像ajax需要较长时间),会直接导致无响应,后面的任务一直在等待执行。这时候就需要用到异步。

? ?想了解异步,首先我们要知道浏览器有最基本的三个常驻线程:JS引擎线程,事件触发线程,GUI渲染线程。

? ?其中JS引擎线程和事件触发线程共同构成了一种事件循环机制,而GUI渲染线程与JS引擎是互斥的,当JS引擎执行GUI线时程会被挂起,GUI更新保存在一个队列中,当JS引擎空闲时,立即被执行。

? ?我们从它的事件循环机制解析:

介绍JS异步的执行原理和回调方法

? ? JS引擎线程中分为同步和异步任务:

? ? ? ? 1。同步任务全部通过主线程执行,形成执行栈。

? ? ? ? 2。当有异步任务时交给异步进程(webapi):包含事件触发线程或者定时器线程等处理,形成任务队列。

? ? ? ? 3。当执行栈中的任务全部处理完成,主线程为空闲的时候,会从任务队列中提取任务到执行栈中执行。

? ?通俗来说,JavaScript除了主线程之外还存在一个任务队列,任务队列存放需要异步执行的内容,执行完主线程后,就会不断循环扫描执行任务队列的任务,直至队列清空。

画解:

介绍JS异步的执行原理和回调方法

? ?如图小明因为学习耗时长会,如果没做完就会一直无法玩DNF游戏了,就把学习放到了异步任务队列中,等玩完游戏(主线程)再学习(任务队列)。期间母亲添加学习事件(DOM事件),小明每完成一个学习任务就看看还有啥任务(循环扫描),直至最后做完。

? ?下面再看一个例子(浏览器刷新不断点击按钮):

,, let  myData =零//ajax才能请求 　　function 才能;ajax (), {//才能腾讯新冠实时数据接口,仅做学习 　　axios.get才能(& # 39;https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList, chinaDayAddList、nowConfirmStatis provinceCompare& # 39;) 　　,,不要犹豫(data =祝辞,{ 　　,,console.log (“ajax返回成功“); 　　,,myData =data.data 　　,,console.log (myData); 　　 　　,,}) 　　,,.catch (error =祝辞,{ 　　,,console.log (“ajax返回失败“); 　　,,}) 　　,,} 　　console.log才能(myData); 　　ajax()才能 　　setTimeout(才能(),=祝辞,{ 　　console.log才能(& # 39;定时器& # 39;); 　　,,},2000); 　　console.log才能(myData); 　　const 才能;btn =, document.querySelector(& # 39;按钮# 39;) 　　btn.onclick 才能=,(),=祝辞,{ 　　console.log才能(“点击了“); 　　以前,,}

空零

ajax返回成功

对象点击了
定时器
点击了

? ?可以看的到,控制台在主线程中是同步执行的,先执行,而在主线程外的任务队列,存放着异步执行的内容,这里是setTimeout, ajax和DOM事件,按照任务队列顺序执行(循环扫描队列)。

<强> ? ?为什么要循环扫描呢?

? ?通过点击事件可以看的出,当用户进行交互时(点击事件,滚动事件,窗口大小变化事件等),会向事件循环中的任务队列添加新事件,然后等待执行,所以需要循环扫描。

二,JS异步中的回调

? ?既然异步都是放在最后的任务队列执行,那么我们很多逻辑就难以实现,这时候我们需要处理这种异步逻辑,最常用的方式是回调,回头调用。

回调函数:简单来说就是,函数的中传入函数B作为参数时,函数B即为一个函数执行的回调函数。回调有嵌套回调和链式回调两种。

? ?下面是回调的一个简单用法:

,,, let  myData =零 　　,,console.log (myData); 　　,,setTimeout((),=祝辞,{ 　　,,,console.log(& # 39;定时器& # 39;); 　　,,,},2000); 　　,,const  btn =, document.querySelector(& # 39;按钮# 39;) 　　,,btn.onclick =,(),=祝辞,{ 　　,,,console.log(“点击了“); 　　,,} 　　,,let  name =,“张三“; 　　,,function 人力资源(回调),{ 　　,,,setTimeout((),=祝辞,{ 　　,,,,console.log(“我是${名称}'); 　　,,,,回调(); 　　,,,},,2001); 　　,,} 　　,,console.log (myData); 　　,,function  gj (), { 　　,,,console.log (“$ {name}你好,我是李四,认识一下吧”); 　　,,} 　　,,人力资源(gj)

介绍JS异步的执行原理和回调方法