写给小白看的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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JavaScript实现单点登录的示例
Sep 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自动获取目录下的模板的代码
2010/08/08 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
JS模块与命名空间的介绍
2013/03/22 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python实现队列的方法
2015/05/26 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
社区创先争优承诺书
2014/08/30 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
nginx服务器的下载安装与使用详解
2021/08/02 Servers