写给小白看的JS异步

gghyoo 发布于2019-08-21 17:38 / 346人阅读

摘要：主线程在启动程序时被创建，用于执行函数。用户自主创建的若干进程相对于主线程而言就是子线程。子线程和主线程都是独立的运行单元，各自的执行互不影响，因此能够并发执行。这就是的异步机制了。

某天突然写了个方法要从后台调用数据，显示在前台页面，但是输出结果总是空undefined，得不到数据。多方找资料才发现，原来是入了JS异步的“坑”。

我们常常听到单线程、多线程、同步、异步这些概念，那么这些东西到底是什么呢？
那么我们先从上面那几个概念说起 o(￣▽￣)ブ

单线程、多线程、同步、异步基本理解

每个正在运行的程序（即进程）至少有一个线程，被称为主线程。主线程在启动程序时被创建，用于执行main函数。

单线程就是只有一个主线的线程，代码从上往下顺序运行，主线程负责执行程序的所有代码（UI展现以及刷新，网络请求，本地存储等等）【一个线程要做所有的事情，想想都有点累呢】

多线程顾名思义，就是有多个线程的程序，可以由用户自主创建。用户自主创建的若干进程相对于主线程而言就是子线程。子线程和主线程都是独立的运行单元，各自的执行互不影响，因此能够并发执行。

光听这些干巴巴的理论是不是觉得有点晕？巧了，我乍一看的时候也晕。
在找资料的过程中，我发现了别人的这么一个形象的比喻。

打个比方，单线程就是你去厨房又烧饭又烧菜，一个人来回跑；多线程就是两个人，一个单做饭，一个单做菜。

这么说，应该更好理解了吧？

而什么又是同步和异步呢？

我们用一个简单的生活例子来说明。

你打电话订酒店，问工作人员有没有房间，这时候，工作人员需要查找有没有房间才能回答你。

同步就是不挂电话一直等，直到工作人员告诉你有没有房间。

异步就是挂断电话，你去做别的事情，比如吃饭喝水，工作人员查到了信息再打电话告诉你。

那么我们的主题来了

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"吧？

然而事情并没有这么简单。我们来看一下控制台的输出：

输出的结果竟然不是顺序的。
也就是说函数执行到getJSON取数据的时候，程序并没有等它取出数据再执行下一步，而是跳过了取数据这一个阶段，直接执行输出data了，因此，data也为空。

这就是JS的异步机制了。

服务器托管专线服务异步js JS异步 js异步框架 js异步文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89799.html

写给前端小白看的linux部署基础知识

摘要：前端平时接触到的机会并不多，但是懂点对于前端来说还是有益无害的，起码还是要了解一下最基本的部署知识。特别注意的是，国内注册的域名要实名备案，否则无法域名解析。前端平时接触到linux的机会并不多，但是懂点linux对于前端来说还是有益无害的，起码还是要了解一下最基本的部署知识。博客地址购买服务器要部署项目，首先我们需要一台服务器。平时开发，项目是跑在我们本地电脑上的，现在我们想...

王岩威 2019-07-25 14:17 评论0 收藏0
写给互联网冬天里程序员看的数据压缩

摘要：而在这个革命的所有这些领域中数据压缩都是基础支撑技术之一。说完了数据压缩的概念我们将注意力回到之前的问题上分别进行解释。而通过数据压缩我们可以提高其传输能力降低存储的空间。而在设计出种数据压缩方案之后我们还需要能够测量它的性能。原文地址:http://blog.52sox.com/data-co... 网上戏说2018是互联网的冬天,先有阿里、腾讯、华为不扩招进行人员优化,后有美...

Genng 2019-07-01 11:12 评论0 收藏0
写给互联网冬天里程序员看的数据压缩

摘要：而在这个革命的所有这些领域中数据压缩都是基础支撑技术之一。说完了数据压缩的概念我们将注意力回到之前的问题上分别进行解释。而通过数据压缩我们可以提高其传输能力降低存储的空间。而在设计出种数据压缩方案之后我们还需要能够测量它的性能。原文地址:http://blog.52sox.com/data-co... 网上戏说2018是互联网的冬天,先有阿里、腾讯、华为不扩招进行人员优化,后有美...

LiuRhoRamen 2019-08-23 14:40 评论0 收藏0