理解异步 JavaScript #4944
Merged
理解异步 JavaScript #4944
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
|
校对认领 |
|
@ElizurHz 好的呢 🍺 |
EquinoxHzXu
reviewed
Jan 3, 2019
|
|
||
|  | ||
|
|
||
| Photo by [Sean Lim](https://unsplash.com/@sean1188?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral) | ||
|
|
||
| JavaScript is a single-threaded programming language which means only one thing can happen at a time. That is, the JavaScript engine can only process one statement at a time in a single thread. | ||
| JavaScript 是一种单线程编程语言，这意味着同一时间只能完成一件事情。也就是说，JavaScript引擎只能在单一线程中处理一次语句。 |
|
|
||
| While the single-threaded languages simplify writing code because you don’t have to worry about the concurrency issues, this also means you can’t perform long operations such as network access without blocking the main thread. | ||
| 单线程语言简化了代码编写。因为你不必担心并发问题，但这也意味着你无法在不阻塞主线程的情况下执行网络请求等长时间操作。 |
|
|
||
| That’s where asynchronous JavaScript comes into play. Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread. | ||
| 这也就是异步 JavaScript 的美妙之处了。使用异步 JavaScript （例如回调，Promise 或者 await/async ），你可以执行长时间网络请求同时不会堵塞主线程。 |
There was a problem hiding this comment.
「（例如回调，Promise 或者 await/async 」
async/await 顺序反了😅
| Before we dive into asynchronous JavaScript, let’s first understand how the synchronous JavaScript code executes inside the JavaScript engine. For example: | ||
|
|
||
| ``` | ||
| ```js |
There was a problem hiding this comment.
【对翻译不影响】语言名称建议要写全称 JavaScript，虽然这在 GitHub 上没有效果的区别，但是许多 Markdown 编辑器不认缩写，无法格式化与高亮
|
|
||
| Next, `console.log('Hi there!')` is pushed to the top of the stack, when it finishes, it’s popped off from the stack. After it, we call `second()`, so the `second()` function is pushed to the top of the stack. | ||
| 接下来，console.log('Hi there!') 被推到调用栈的顶部，当它执行完成后，它会从调用栈中弹出。在它之后，我们调用 second() ，因此 second() 函数被推送到调用栈的顶部。 |
There was a problem hiding this comment.
console.log('Hi there!') 和 second() 要保留原有的 Markdown 格式，译文漏了 `` 符号
| @@ -243,92 +221,84 @@ Promise resolved | |||
| setTimeout | |||
| ``` | |||
|
|
|||
| We can see that the promise is executed before the `setTimeout`, because promise response are stored inside the micro-task queue which has a higher priority than the message queue. | |||
| 我们可以看到 `promise` 在 `setTimeout` 之前执行，因为 `promise` 响应存储在微任务队列中，其优先级高于消息队列。 | |||
There was a problem hiding this comment.
「promise」：不建议在原文的基础上额外添加 Markdown 样式
|
|
||
| Let’s take another example, this time with two promises and two setTimeout. For example: | ||
| 让我们再看一个例子，这次有两个 `promise` 和两个 `setTimeout` 。例如： |
There was a problem hiding this comment.
不建议在原文的基础上额外添加 Markdown 样式
| setTimeout 2 | ||
| ``` | ||
|
|
||
| We can see that the two promises are executed before the callbacks in the `setTimeout` because the event loop prioritizes the tasks in micro-task queue over the tasks in message queue/task queue. | ||
| 我们可以看到两个 `promise` 都在 `setTimeout` 中的回调之前执行，因为事件循环将微任务队列中的任务优先于消息队列/任务队列中的任务。 |
There was a problem hiding this comment.
不建议在原文的基础上额外添加 Markdown 样式
|
|
||
| While the event loop is executing the tasks in the micro-task queue and in that time if another promise is resolved, it will be added to the end of the same micro-task queue, and it will be executed before the callbacks inside the message queue no matter for how much time the callback is waiting to be executed. | ||
| 当事件循环正在执行微任务队列中的任务时，如果另一个 `promise` 执行 `resolve` 方法，那么它将被添加到同一个微任务队列的末尾，并且它将在消息队列的所有回调之前执行，无论消息队列回调等待执行花费了多少时间。 |
There was a problem hiding this comment.
不建议在原文的基础上额外添加 Markdown 样式
|
|
||
| So we have learned how asynchronous JavaScript works and other concepts such as call stack, event loop, message queue/task queue and job queue/micro-task queue which together make the JavaScript runtime environment. While it’s not necessary that you learn all these concepts to be an awesome JavaScript developer, but it’s helpful to know these concepts :) | ||
| 因此，我们已经了解了异步 JavaScript 如何工作以及其他概念，例如调用栈，事件循环，消息队列/任务队列和工作队列/微任务队列，它们共同构成了 JavaScript 运行时环境。虽然您没有必要将所有这些概念都学习成为一名出色的 JavaScript 开发人员，但了解这些概念会很有帮助:) |
|
@leviding 校对认领 |
|
@Yangfan2016 妥妥哒 🍻 |
Yangfan2016
reviewed
Jan 3, 2019
|
|
||
| While it’s not necessary that you learn all these concepts to be an awesome JavaScript developer, it’s helpful to know :) | ||
| 虽然您没有必要将所有这些概念都学会成为一名出色的JavaScript开发人员，但了解这些对你会很有帮助 |
|
|
||
| JavaScript has a single call stack because it’s a single-threaded programming language. The call stack has a LIFO structure which means that the items can be added or removed from the top of the stack only. | ||
| JavaScript 有一个单独的调用栈，因为它是一种单线程编程语言。调用栈具有 LIFO 结构，这意味着只能从调用栈顶部添加或删除项目。 |
There was a problem hiding this comment.
『这意味着只能从调用栈顶部添加或删除 项目 』=>「这意味着只能从调用栈顶部添加或删除 元素 」
我觉得翻译为「元素 」或「项 」更合适
|
|
||
| Imagine requesting some data from an API. Depending upon the situation the server might take some time to process the request while blocking the main thread making the web page unresponsive. | ||
| 想象一下从 API 中请求一些数据。根据情况，服务器可能需要一些时间来处理请求，同时堵塞主线程，让网页无法响应。 |
There was a problem hiding this comment.
『同时 堵塞 主线程』=> 「同时 阻塞 主线程」
我认为翻译为 「阻塞」更合适，因为你下面的翻译也是用的 「阻塞」，统一下
|
|
||
| That’s where asynchronous JavaScript comes into play. Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread. | ||
| 这也就是异步 JavaScript 的美妙之处了。使用异步 JavaScript （例如回调，Promise 或者 await/async ），你可以执行长时间网络请求同时不会堵塞主线程。 |
|
|
||
| `setTimeout()` 方法在 Web APIs 环境中启动 2s 的计时器。此时，`setTimeout()` 已完成，并从调用栈中弹出。在它之后，`console.log('The End')` 被推送到栈，在执行完成后从调用栈中删除。 | ||
|
|
||
| 同时，计时器已到期，现在回调函数被推送到消息队列。但回调函数并没有立即执行，而这就是事件循环（Event Loop）的起点。 |
There was a problem hiding this comment.
而这就是事件循环（Event Loop）的起点
不是很懂这这句话的意思，『事件循环的起点』，求教 ❓ 😃
There was a problem hiding this comment.
and that’s where the event loop kicks in.
原文是这句话，我联系上下文，觉得 这就是一个事件循环
但是按照语义(使用 google 翻译) 这不合理,所以我就沿用了 Google 的翻译，你这边的觉得怎么样翻译合适一点。
|
|
||
| #### DOM Events | ||
| **消息队列**还包含来自 DOM 事件的回调，例如单击事件和键盘事件。 |
|
|
||
| #### ES6 Job Queue/ Micro-Task queue | ||
| #### ES6 工作队列/微任务队列（Job Queue/ Micro-Task queue） |
|
@Yangfan2016 收到了,实在是太麻烦你了,你看的好仔细,十分感谢我现在再改正一下 |
leviding
approved these changes
Jan 4, 2019
|
@H246802 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。 掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。 |
|
@leviding 收到了,马上行动 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
译文翻译完成，resolve #4939