写给小白看的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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
基于JS脚本语言的基础语法详解
Jul 22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
Express结合Webpack的全栈自动刷新
May 23 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的类树(支持无限分类)
2006/10/09 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php实现短信发送代码
2015/07/05 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
srcElement表格样式
2006/09/03 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python实现文件复制删除
2016/04/19 Python
python的socket编程入门
2018/01/29 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python中的错误如何查看
2020/07/08 Python
Python实现区域填充的示例代码
2021/02/03 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
加油口号大全
2014/06/13 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
技术股东合作协议书
2014/12/02 职场文书
申报优秀教师材料
2014/12/16 职场文书
结婚保证书
2015/01/16 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
python区块链实现简版工作量证明
2022/05/25 Python