欢迎来到雅狐站长网!
兔子CDN

Javascript/Ajax

当前位置:主页 > 网页制作 > Javascript/Ajax >

JS异步的执行原理和回调详解

时间:2021-04-27 14:50:43|栏目:Javascript/Ajax|点击:

一、JS异步执行原理

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

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

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

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

JS异步的执行原理和回调详解

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

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

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

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

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

画解:

JS异步的执行原理和回调详解

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

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

  let myData = null
  //ajax请求
  function ajax() {
  //腾讯新冠实时数据接口,仅做学习
  axios.get('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare')
   .then(data => {
   console.log("ajax返回成功");
   myData = data.data
   console.log(myData);

   })
   .catch(error => {
   console.log("ajax返回失败");
   })
  }
  console.log(myData);
  ajax()
  setTimeout(() => {
  console.log('定时器');
  }, 2000);
  console.log(myData);
  const btn = document.querySelector('button')
  btn.onclick = () => {
  console.log("点击了");
  }

null
null
ajax返回成功
Object
点击了
定时器
点击了

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

  为什么要循环扫描呢?

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

二、JS异步中的回调

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

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

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

   let myData = null
   console.log(myData);
   setTimeout(() => {
    console.log('定时器');
   }, 2000);
   const btn = document.querySelector('button')
   btn.onclick = () => {
    console.log("点击了");
   }
   let name = "张三"
   function hr(callback) {
    setTimeout(() => {
     console.log(`我是${name}`);
     callback();
    }, 2001);
   }
   console.log(myData);
   function gj() {
    console.log(`${name}你好,我是李四,认识一下吧`);
   }
   hr(gj)

null
null
点击了
定时器
我是张三
张三你好,我是李四,认识一下吧
点击了

  很明显的看到,当我们函数需要用到数据的时候就用到了回调,这里用到的是异步回调。

  回调虽然是解决异步常用的方法,可是伴随着JS日益复杂的需求。同步异步需要越来越多的回调实现逻辑。同异步的混杂和过多的回调嵌套和缩进使得代码变得难以解读和维护,形成“回调地狱”。

JS异步的执行原理和回调详解

上一篇:vue简单实现转盘抽奖

栏    目:Javascript/Ajax

下一篇:Elasticsearch工具cerebro的安装与使用教程

本文标题:JS异步的执行原理和回调详解

本文地址:http://www.cnzzww.cn/JavaScript/56505.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ: | 邮箱:111#qq.com(#换成@)

Copyright © 2015-2020 雅狐站长网 版权所有 苏ICP备20040415号