関数内で変更した後も変数が変更されない理由 - 非同期コードを理解する

Question

次の例で、すべてのケースで externalScopeVar が定義されていないのはなぜですか? varouterScopeVar;varimg=document.createElement('img');img.onload=function(){outerScopeVar=this.width;};img.src='lolcat.png';alert(outerScopeVar);varouterScopeVar;setT

P粉930534280 · Answer

Fabrício の答えは非常に正しいですが、私は、アナロジーを通じて非同期性の概念を説明することに重点を置き、少し専門的ではない内容で彼の答えを補足したいと思います。

＃＃＃類推...＃＃＃

昨日、私は同僚から情報を得る必要がある仕事をしていました。彼に電話したところ、会話は次のようになりました:

そう言って電話を切りました。レポートを完成させるためにボブからの情報が必要だったので、私はレポートを離れ、コーヒーを飲みに行き、それからいくつかのメールを読みました。 40 分後 (ボブは遅い) ボブから折り返し電話があり、必要な情報を教えてくれました。この時点で、必要な情報はすべて揃っているので、レポートの作成を続けます。

会話が次のようになったと想像してください;

私はそこに座って待っていました。そして待った。そして待った。 40分。何もせずただ待ってください。結局、ボブが私に情報を提供し、電話を切り、私は報告を終えました。しかし、生産性は 40 分失われました。

これは非同期動作と同期動作の比較です

これはまさに、私たちの質問のすべての例で起こっていることです。画像の読み込み、ディスクからのファイルの読み込み、AJAX 経由でのページのリクエストはすべて (最新のコンピューティングのコンテキストでは) 遅い操作です。

JavaScript を使用すると、

これらの遅い操作が完了するまで待機するのではなく、遅い操作が完了したときに実行されるコールバック関数を登録できます。ただし、その間、JavaScript は他のコードの実行を続けます。遅い操作が完了するのを待っている間に JavaScript が

other code

を実行しているという事実により、動作は 非同期になります。 JavaScript が操作の完了を待ってから他のコードを実行する場合、これは同期動作になります。 リーリー 上記のコードでは、JavaScript に lolcat.png をロードするように依頼しています。これは

sloooow

操作です。この遅い操作が完了すると、コールバック関数が実行されますが、その間、JavaScript はコードの次の行、つまり alert(outerScopeVar) の処理を続けます。これが、unknown を示すアラートが表示される理由です。これは、

alert()

がイメージのロード後ではなく、すぐに処理されるためです。コードを修正するには、alert(outerScopeVar) コードをコールバック関数に移動するだけです。したがって、

outerScopeVar

変数をグローバル変数として宣言する必要はなくなりました。 リーリーコールバックは関数として指定されていることが常に表示されます。これは、JavaScript でコードを定義して後で実行する唯一の方法だからです。

つまり、すべての例で、 function() { /* Do Something */ } はコールバックです。すべての 例を修正するには、必須レスポンスを操作するコードはそこに移動されます。

#* 技術的には eval() も使用できますが、eval()

はその目的にとっては悪です

^{発信者を保留にするにはどうすればよいですか?

現在、これに似たコードがある可能性があります;

リーリー} ただし、

onload

コールバック関数が変数を更新する前に、outerScopeVar

を返す

が即座に行われることがわかりました。これにより、

getWidthOfImage()

は

unknown を返し、アラート unknown を生成します。

これを修正するには、getWidthOfImage() を呼び出す関数がコールバックを登録し、そのコールバック内に幅アラートを移動できるようにする必要があります。リーリー

...前と同様に、グローバル変数 (この場合は

width) を削除できたことに注目してください。

P粉178894235 · Answer

一言で答えます: 非同期性。

＃＃＃序文＃＃＃

このトピックは、Stack Overflow で少なくとも何千回も繰り返されています。そこで最初に、非常に役立つリソースをいくつか紹介したいと思います。

@「非同期呼び出しから応答を返すにはどうすればよいですか?」に対する Felix Kling の回答
。同期プロセスと非同期プロセスを説明した彼の優れた回答と、「コードの再編成」セクションを参照してください。 @Benjamin Gruenbaum は、同じスレッド内の非同期性の説明にも多大な労力を費やしました。
「fs.readFile からデータを取得する」に対する @Matt Esch の回答
も、非同期性を簡単な方法で説明するのに適しています。

現在の質問への回答

まず、一般的な動作を追跡しましょう。すべての例で、

outerScopeVar

は function 内で変更されます。この関数は明らかにすぐには実行されず、割り当てられるかパラメータとして渡されます。これをコールバック と呼びます。 ここでの問題は、このコールバックがいつ呼び出されるのかということです。

それは特定の状況によって異なります。もう一度、一般的な動作を追跡してみましょう:

(画像が正常に読み込まれた場合) 将来のある時点で と呼ばれる可能性があります。
は、遅延が期限切れになり、タイムアウトが clearTimeout キャンセルされなかった後、将来の 時点で呼び出される可能性があります。注: 遅延として 0 を使用する場合でも、すべてのブラウザには最小タイムアウト遅延の上限があります (HTML5 仕様では 4 ミリ秒と指定されています)。 Ajax リクエストが正常に完了すると、将来のある時点で
$.post が呼び出される可能性があります。 Node.js の fs.readFile
将来、ファイルが正常に読み取られたか、エラーがスローされたときに 呼び出される可能性があります。 すべての場合において、

非同期ストリーム

と呼びます。非同期実行は同期プロセスからプッシュされます。つまり、同期コードスタックの実行中、非同期コードは 永遠に 実行されます。これが JavaScript のシングルスレッドの特徴です。

より具体的には、JS エンジンがアイドル状態であるとき (大量の同期コードを実行していないとき) は、非同期コールバックをトリガーする可能性のあるイベント (タイムアウト、ネットワーク応答の受信など) をポーリングし、それらを次々に実行します。これは イベントループ とみなされます。

つまり、赤い手書きの形で強調表示された非同期コードは、それぞれのコードブロック内の残りの同期コードがすべて実行された後でのみ実行できます。

つまり、コールバック関数は同期的に作成されますが、実行は非同期的に行われます。非同期関数が実行されたことがわかるまでは、その実行に依存することはできません。どうすればよいでしょうか?

とても簡単です。非同期関数の実行に依存するロジックは、その非同期関数内から開始/呼び出しする必要があります。たとえば、コールバック関数内で

alert

と

console.log

を移動すると、その時点で結果が利用できるため、期待どおりの結果が出力されます。

独自のコールバックロジックを実装する 多くの場合、非同期関数が呼び出される場所に応じて、非同期関数の結果に対してさらに多くの操作を実行したり、結果に対して異なる操作を実行したりする必要があります。より複雑な例を見てみましょう: リーリー

注: 私は、汎用の非同期関数としてランダムな遅延を伴う setTimeout を使用しています。同じ例は、Ajax、readFile、onload、およびその他の非同期フローでも機能します。

この例には明らかに他の例と同じ問題があり、async 関数が実行されるまで待機しません。

独自のコールバックシステムを実装して、この問題を解決しましょう。まず、この場合はまったく役に立たない醜い outerScopeVar を削除します。次に、関数の引数を受け入れるパラメーター、つまりコールバックを追加します。非同期操作が完了すると、このコールバックを呼び出して結果を渡します。実装 (コメントを順番に読んでください):

リーリー

上記の例のコードスニペット:

リーリー