js异步感觉不是真异步_异步JS简介

js异步感觉不是真异步

In this article, we’ll be answering what is asynchronous JavaScript and why it’s important to learn?

在本文中，我们将回答什么是异步 JavaScript以及为什么学习它很重要？

先决条件 (Prerequisites)

Asynchronous JavaScript is a fairly advanced topic, if you are new to this programming language, I advise you to work through its basics first, such as variables, arrays... And some other things like functions.

异步JavaScript是一个相当高级的主题，如果您是这种编程语言的新手，我建议您首先了解它的基础知识，例如变量，数组...以及函数之类的其他东西。

JavaScript是单线程的 (JavaScript is single-threaded)

This means it executes code in order and must finish executing a piece of code before moving onto the next one. It’s synchronous, but at times that can be harmful. For example, if a function takes a while to execute or has to wait on something, it freezes everything up in the meantime.

这意味着它按顺序执行代码，并且必须先执行一段代码，然后再继续执行下一段代码。 它是同步的 ，但有时可能是有害的。 例如，如果一个函数需要一段时间才能执行或必须等待某件事，那么它会同时冻结所有内容。

A good example of this happening is the window alert function. alert("Hello World" You can’t interact with the web page at all until you hit OK and dismiss the alert. You’re stuck.

窗口警报功能就是一个很好的例子。 alert("Hello World"您完全无法与网页进行交互，直到您单击OK并关闭警报。您被卡住了。

我的故事 (My Story)

As a JS dev, I know we all struggled to understand asynchronous JS and apply it. At the beginning, I said to myself “why should I even know about that? How is it important? Many people saying it’s a pain in the neck so why should I bother?” The answer was when I needed to force my code to execute in a specific order, I was trying to retrieve data from an API and then execute some code related to that data. Let’s say I wanted my code to execute in that order:

作为一个JS开发人员，我知道我们所有人都在努力理解和应用异步JS。 一开始，我对自己说：“我为什么还要知道这一点？ 它有多重要？ 许多人说这是脖子上的疼痛，那我为什么还要打扰呢？” 答案是当我需要强制代码按特​​定顺序执行时，我试图从API检索数据，然后执行与该数据相关的一些代码。 假设我希望我的代码按该顺序执行：

// First
console.log(1)
// Second
fetch('www.example.com',{}); // Getting data from an API
// Third
console.log(2)

But my code was running like so:

但是我的代码是这样运行的：

console.log(1)
console.log(2)
fetch('www.example.com',{});

So I was like “whyy? Isn’t javascript synchronous?” so I obviously started to stack-overflow my issue, that’s when I discovered that JavaScript won’t wait for the API call to end but it’ ll run it while executing the rest of the code. “Hmm, interesting”, so yeah I googled more and I found out that it was what I've been ignoring, our friend: Asynchronous JavaScript.

所以我就像“为什么？ JavaScript不同步吗？” 所以我显然开始堆栈溢出我的问题，那是当我发现JavaScript不会等待API调用结束，但是它将在执行其余代码时运行它。 “嗯，很有趣”，是的，我在Google上搜索了更多，发现我一直在忽略我们的朋友：异步JavaScript。

所以发生了什么事？ (So what happened?)

As we mentioned in the beginning, asynchronous code can lead to blocking and poor performance. But thanks to the JavaScript engine (V8, Spidermonkey, JavaScriptCore, etc.), which has Web API that handle these tasks in the background, the call stack recognizes functions of the Web API and hands them off to be handled by the browser. Once those tasks are finished by the browser, they return and are pushed onto the stack. So to summarize, what happened is absolutely in our favor.

就像我们一开始提到的那样，异步代码会导致阻塞和性能下降。 但是，由于JavaScript引擎(V8，Spidermonkey，JavaScriptCore等)具有在后台处理这些任务的Web API，因此调用堆栈可以识别Web API的功能并将其交给浏览器处理。 浏览器完成这些任务后，它们将返回并被推入堆栈。 综上所述，发生的事情绝对是我们的青睐。

Open your console and type window then press enter. You'll see most of what the Web API has to offer. This includes things like ajax calls, event listeners, the fetch API, and setTimeout. JavaScript uses low-level programming languages like C++ to perform these behind the scenes.

打开控制台并键入window然后按Enter。 您将看到Web API必须提供的大多数功能。 其中包括ajax调用，事件监听器，fetch API和setTimeout之类的东西。 JavaScript使用低级编程语言(例如C ++)在后台执行这些操作。

Now, you’re maybe wondering how can you force the execution to be in a specific order even if you’re using Web API services.

现在，您可能想知道即使使用Web API服务，如何强制执行以特定顺序执行。

Our beloved JavaScript offers many solutions in order to achieve that and we’ll be covering these soon in another article.

我们钟爱JavaScript提供了许多解决方案来实现这一目标，我们将在另一篇文章中对此进行介绍。

Stay tuned and thank you for reading! 😄

请继续关注，并感谢您的阅读！ 😄

翻译自: https://medium.com/weekly-webtips/intro-to-async-js-6f2270c11a10

js异步感觉不是真异步