写给小白看的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 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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/01/18 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php学习笔记之面向对象
2014/11/08 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
保安队长职务说明书
2014/02/23 职场文书
继承公证书样本
2014/04/04 职场文书
个人批评与自我批评
2014/10/15 职场文书
博士给导师的自荐信
2015/03/06 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
公司管理建议书
2015/09/14 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
Linux磁盘管理方法介绍
2022/06/01 Servers
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS