写给小白看的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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JS跨域总结
Aug 30 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue实现简单图片上传
2020/06/30 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python元组常见操作示例
2019/02/19 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python实现TCP文件传输
2020/03/20 Python
pyqt5中动画的使用详解
2020/04/01 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
学校后勤岗位职责
2014/02/19 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
搞笑的获奖感言
2014/08/16 职场文书
学校食堂标语
2014/10/06 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书