写给小白看的JavaScript异步


Posted in Javascript onNovember 29, 2017

某天突然写了个方法要从后台调用数据,显示在前台页面,但是输出结果总是空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"吧?

然而事情并没有这么简单。我们来看一下控制台的输出:

写给小白看的JavaScript异步

输出的结果竟然不是顺序的。

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

这就是JS的异步机制了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
微信小程序 教程之事件
Oct 18 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
3种vue组件的书写形式
Nov 29 #Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 #Javascript
纯js实现隔行变色效果
Nov 29 #Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 #Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 #Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 #Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
You might like
php编写一个简单的路由类
2011/04/13 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
企业文化理念标语
2014/06/10 职场文书
社区清明节活动总结
2014/07/04 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
入党培养人考察意见
2015/06/08 职场文书