写给小白看的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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 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自动反斜杠的函数代码
2010/01/05 PHP
PHP抽象类 介绍
2012/06/13 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python切片用法实例教程
2014/09/08 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python装饰器基础详解
2016/03/09 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
对python中return和print的一些理解
2017/08/18 Python
Python 异常处理的实例详解
2017/09/11 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
高级Java程序员面试题
2016/06/23 面试题
双创工作实施方案
2014/03/26 职场文书
希特勒的演讲稿
2014/05/23 职场文书
2014年医务科工作总结
2014/12/18 职场文书
婚礼新人答谢词
2015/01/04 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
React配置子路由的实现
2021/06/03 Javascript
Python集合set()使用的方法详解
2022/03/18 Python
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js