study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-10-11 17:03:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

语法高亮，滚动条美化，设置页面调整

Browse Source
This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/javascript/EventLoop.html
View File

@@ -7,7 +7,7 @@
<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"/></p>
<h3 id="栈">栈</h3>
<p>函数调用形成了一个栈帧。</p>
<pre class="brush: js">function foo(b) {
<pre><code class="language-javascript">function foo(b) {
var a = 10;
return a + b + 11;
}
@@ -17,7 +17,7 @@ function bar(x) {
return foo(x * y);
}
console.log(bar(7)); // 返回 42</pre>
console.log(bar(7)); // 返回 42</code></pre>
<p>当调用 <code>bar</code> 时，创建了第一个帧 ，帧中包含了 <code>bar</code> 的参数和局部变量。当 <code>bar</code> 调用 <code>foo</code> 时，第二个帧就被创建，并被压到第一个帧之上，帧中包含了 <code>foo</code> 的参数和局部变量。当 <code>foo</code> 返回时，最上层的帧就被弹出栈（剩下 <code>bar</code> 函数的调用帧 ）。当 <code>bar</code> 返回的时候，栈就空了。</p>
<h3 id="堆">堆</h3>
<p>对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。</p>
@@ -27,9 +27,9 @@ console.log(bar(7)); // 返回 42</pre>
<p>函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。</p>
<h2 id="事件循环">事件循环</h2>
<p>之所以称之为事件循环，是因为它经常按照类似如下的方式来被实现：</p>
<pre class="brush: js">while (queue.waitForMessage()) {
<pre><code class="language-javascript">while (queue.waitForMessage()) {
queue.processNextMessage();
}</pre>
}</code></pre>
<p>如果当前没有任何消息，<code>queue.waitForMessage()</code> 会同步地等待消息到达。</p>
<h3 id="执行至完成">"执行至完成"</h3>
<p>每一个消息完整的执行后，其它消息才会被执行。这为程序的分析提供了一些优秀的特性，包括：一个函数执行时，它永远不会被抢占，并且在其他代码运行之前完全运行（且可以修改此函数操作的数据）。这与C语言不同，例如，如果函数在线程中运行，它可能在任何位置被终止，然后在另一个线程中运行其他代码。</p>
@@ -38,7 +38,7 @@ console.log(bar(7)); // 返回 42</pre>
<p>在浏览器里，当一个事件发生且有一个事件监听器绑定在该事件上时，消息会被随时添加进队列。如果没有事件监听器，事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息，其它事件类似。</p>
<p>函数 <a class="new" href="/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" rel="nofollow" title="此页面仍未被本地化, 期待您的翻译!"><code>setTimeout</code></a> 接受两个参数：待加入队列的消息和一个延迟（可选，默认为 0）。这个延迟代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，<code>setTimeout</code> 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。</p>
<p>下面的例子演示了这个概念（<code>setTimeout</code> 并不会在计时器到期之后直接执行）：</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> s <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getSeconds</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<pre><code class="language-javascript"><code class="language-js"><span class="keyword token">const</span> s <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getSeconds</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="comment token">// 输出 "2"，表示回调函数并没有在 500 毫秒之后立即执行</span>
@@ -50,12 +50,12 @@ console.log(bar(7)); // 返回 42</pre>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Good, looped for 2 seconds"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">break</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span></code></pre>
<span class="punctuation token">}</span></code></code></pre>
<h3 id="零延迟">零延迟</h3>
<p>零延迟并不意味着回调会立即执行。以 0 为第二参数调用 <code>setTimeout</code> 并不表示在 0 毫秒后就立即调用回调函数。</p>
<p>其等待的时间取决于队列里待处理的消息数量。在下面的例子中，"this is just a message" 将会在回调获得处理之前输出到控制台，这是因为延迟参数是运行时处理请求所需的最小等待时间，但并不保证是准确的等待时间。</p>
<p>基本上，<code>setTimeout</code> 需要等待当前队列中所有的消息都处理完毕之后才能执行，即使已经超出了由第二参数所指定的时间。</p>
<pre class="brush: js">(function() {
<pre><code class="language-javascript">(function() {
console.log('这是开始');
@@ -79,7 +79,7 @@ console.log(bar(7)); // 返回 42</pre>
// 此处，函数返回了 undefined
// "这是来自第一个回调的消息"
// "这是来自第二个回调的消息"
</pre>
</code></pre>
<h3 id="多个运行时互相通信">多个运行时互相通信</h3>
<p>一个 web worker 或者一个跨域的 <code>iframe</code> 都有自己的栈，堆和消息队列。两个不同的运行时只能通过 <a href="/zh-CN/docs/Web/API/Window/postMessage" title="window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。"><code>postMessage</code></a> 方法进行通信。如果另一运行时侦听 <code>message</code> 事件，则此方法会向其添加消息。</p>
<h2 id="永不阻塞">永不阻塞</h2>