新手必看的js实现异步方法

这一次，我给大家带来了新手必看的js实现异步的方法。新手必须看js实现的注意事项。以下是实战案例。让我们看看。

有一天，我突然写了一种从后台调用数据并显示在前台页面上的方法，但输出结果总是空的，无法获得数据。多方寻找信息发现原来是JS异步的“坑”。

我们经常听到单线程、多线程、同步和异步的概念，那么这些东西到底是什么呢？所以让我们从上述概念开始

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

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

1.单线程是指只有一个主线程，代码从上到下运行。主线程负责执行程序的所有代码（UI显示和刷新、网络请求、本地存储等）。[一个线程要做一切，想想有点累]

2.多线程，顾名思义，就是有多个线程的程序，可以由用户自己创建。与主线程相比，用户自主创建的几个过程都是子线程。子线程和主线程是独立的运行单元，各自的执行互不影响，可以并发执行。

光听这些干巴巴的理论是不是觉得有点晕？巧合的是，我第一眼就晕了。

在寻找信息的过程中，我发现了别人的形象比喻。

比如单线程就是你去厨房做饭做饭，一个人来回跑；多线程是两个人，一个单做饭，一个单做饭。

所以，应该更好的理解吧？

同步和异步是什么？

我们用一个简单的生活例子来解释。

您打电话预订酒店，询问工作人员是否有房间，此时，工作人员需要查找是否有房间才能回答您。

同步是不要挂断电话，直到工作人员告诉你是否有房间。异步是挂断电话，你做其他事情，比如吃喝，工作人员找到信息，然后打电话告诉你。

所以我们的主题来了

JS的异步操作是什么？

JS的执行环境是单线程的，也就是说，当程序顺序执行时，一次只能执行一个任务。如果程序想向下运行，它必须等待当前的任务完成，无论当前的任务需要执行多长时间（如果程序急于运行，等待真的很不舒服）。

为了解决后续程序等不舒服的阻塞问题。JavaScript有一种异步处理模式，实际上是延迟处理。

让我们再抛出一个例子来解释。

vargetUserInfo=function(){$.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo",function(){returndata;});}vardata=getUserInfo();renderUserInfo(data)

getuserinfo的函数被调用，在后台取数据可能需要很多时间，这需要renderuserinfo等待，直到data被取出。幸运的是，JS有异步操作。取数据时，不需要renderuserinfo等待data取出，而是直接执行。

这么说，这两个函数的顺序是什么？别担心，让我们调试一下

vargetUserInfo=function(){console.log('aaa');$.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo",function(){console.log('bbb');returndata;});}vardata=getUserInfo();console.log(data);console.log('ccc');renderUserInfo(data);

顺序执行的输出原以为是"aaa","bbb","ccc"吧？

也就是说，当函数执行到getJSON取数据时，程序并没有等待它取出数据再执行下一步，而是跳过了取数据的阶段，直接执行输出data。，data是空的。

这就是JS的异步机制。

相信看完这篇文章，你已经掌握了方法，更多精彩请关注Gxl网的其他相关文章！

推荐阅读

如何在项目中使用与ajax同源的策略？

如何实现轨迹回放？