新手必看的js实现异步方法

这次给大家带来新手必看的js实现异步方法,新手必看js实现的注意事项有哪些,下面就是实战案例,一起来看一下。

某天突然写了个方法要从后台调用数据,显示在前台页面,但是输出结果总是空undefined,得不到数据。多方找资料才发现,原来是入了JS异步的“坑”。

我们常常听到单线程、多线程、同步、异步这些概念,那么这些东西到底是什么呢?
那么我们先从上面那几个概念说起

单线程、多线程、同步、异步基本理解

每个正在运行的程序(即进程)至少有一个线程,被称为主线程。主线程在启动程序时被创建,用于执行main函数。

1.单线程就是只有一个主线的线程,代码从上往下顺序运行,主线程负责执行程序的所有代码(UI展现以及刷新,网络请求,本地存储等等)【一个线程要做所有的事情,想想都有点累呢】

2.多线程顾名思义,就是有多个线程的程序,可以由用户自主创建。用户自主创建的若干进程相对于主线程而言就是子线程。子线程和主线程都是独立的运行单元,各自的执行互不影响,因此能够并发执行。

光听这些干巴巴的理论是不是觉得有点晕? 巧了,我乍一看的时候也晕。

在找资料的过程中,我发现了别人的这么一个形象的比喻。

打个比方,单线程就是你去厨房又烧饭又烧菜,一个人来回跑;多线程就是两个人,一个单做饭,一个单做菜。

这么说,应该更好理解了吧?

而什么又是同步和异步呢?

我们用一个简单的生活例子来说明。

你打电话订酒店,问工作人员有没有房间,这时候,工作人员需要查找有没有房间才能回答你。

同步就是不挂电话一直等,直到工作人员告诉你有没有房间。
异步就是挂断电话,你去做别的事情,比如吃饭喝水,工作人员查到了信息再打电话告诉你。

那么我们的主题来了

JS的异步操作是怎样的呢?

JS的执行环境是单线程的,也就是说,程序顺序执行下来,一次只能执行一个任务,程序想要往下运行,就必须等待当前的任务执行完毕,不管当前的任务要执行多久(要是后面的程序急着跑出来可真的是等的很难受呢)。

为了解决后面程序等的难受的这个阻塞问题。JavaScript有一种异步处理模式,其实就是延时处理。

我们再来抛出例子来说明。

var getUserInfo = function () {      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {        return data;      });    }    var data = getUserInfo();    renderUserInfo(data)

登录后复制

getUserInfo这个函数被调用,要取后台取数据,可能要耗费很多时间,这就要让renderUserInfo一直等着,直到取出data才能运行。幸好JS有异步操作,取数据的时候,不用renderUserInfo一直等着data取出来,而是直接执行。

这么说的话,那么这两个函数到底是什么顺序执行的呐?不急,我们来调试一下:

var getUserInfo = function () {      console.log('aaa');      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {        console.log('bbb');        return data;      });    }    var data = getUserInfo();    console.log(data);    console.log('ccc');    renderUserInfo(data);

登录后复制

顺序执行下来的输出原以为是”aaa”,”bbb”,”ccc”吧?

也就是说函数执行到getJSON取数据的时候,程序并没有等它取出数据再执行下一步,而是跳过了取数据这一个阶段,直接执行输出data了,因此,data也为空。

这就是JS的异步机制了。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS与ajax同源策略在项目中怎样使用

canvas怎么实现轨迹回放

以上就是新手必看的js实现异步方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772391.html

(0)
上一篇 2025年3月8日 13:16:16
下一篇 2025年3月6日 09:50:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 有哪些vue组件的书写方法

    这次给大家带来有哪些vue组件的书写方法,使用vue组件的注意事项有哪些,下面就是实战案例,一起来看一下。 第一种使用script标签 <– 注意:使用标签时,type指定为text/x-template,意在告诉浏览器这不是一段j…

    编程技术 2025年3月8日
    200
  • js怎么实现隔行变色

    这次给大家带来js怎么实现隔行变色,js实现隔行变色的注意事项有哪些,下面就是实战案例,一起来看一下。 function createTable(){ //创建表格 var table = document.createElement(“t…

    编程技术 2025年3月8日
    200
  • 在angularjs中怎样实现echart图表

    这次给大家带来在angularjs中怎样实现echart图表,在angularjs中实现echart图表的注意事项有哪些,下面就是实战案例,一起来看一下。 ehcart是百度做的数据图表,基于原生js。接口和配置都写的很好很易读,还可以用于…

    编程技术 2025年3月8日
    200
  • node.js实现web终端操作多用户

    这次给大家带来node.js实现web终端操作多用户,node.js实现web终端操作多用户的注意事项有哪些,下面就是实战案例,一起来看一下。 terminal(命令行)作为本地IDE普遍拥有的功能,对项目的git操作以及文件操作有着非常强…

    编程技术 2025年3月8日
    200
  • JS动态规划使用详解

    这次给大家带来JS动态规划使用详解,JS动态规划使用的注意事项有哪些,下面就是实战案例,一起来看一下。 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for语句,swith语句等等,就可以解决了。稍微复杂的,可能会想到…

    编程技术 2025年3月8日
    200
  • vue-cli脚手架的dev-server.js配置文件使用详解

    这次给大家带来vue-cli脚手架的dev-server.js配置文件使用详解,使用vue-cli脚手架dev-server.js配置文件的注意事项有哪些,下面就是实战案例,一起来看一下。 本文系统讲解vue-cli脚手架build目录中的…

    编程技术 2025年3月8日
    200
  • js和jquery如何实现自动加载图片(附代码)

    这次给大家带来js和jquery如何实现自动加载图片(附代码),js和jquery实现自动加载图片的注意事项有哪些,下面就是实战案例,一起来看一下。 一、JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)…

    编程技术 2025年3月8日
    200
  • datatable怎样实现异步加载

    这次给大家带来datatable怎样实现异步加载,datatable实现异步加载的注意事项有哪些,下面就是实战案例,一起来看一下。 table部分代码 用户名 渠道名 游戏名 结果 耗时 创建时间 登录后复制 异步加载数据并实现定制化 下面…

    编程技术 2025年3月8日
    200
  • 原生JS有哪些实现Ajax异步的方法

    这次给大家带来原生JS有哪些实现Ajax异步的方法,原生JS实现Ajax异步的注意事项有哪些,下面就是实战案例,一起来看一下。 在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery…

    编程技术 2025年3月8日
    200
  • js如何匹配计算font-size

    这次给大家带来js如何匹配计算font-size,js匹配计算font-size的注意事项有哪些,下面就是实战案例,一起来看一下。 实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论