関数内で変数を変更した後、変数が変更されないのはなぜですか? - 非同期コードリファレンス 質問する

一言で答えると、非同期性です。

序文

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

• 「非同期呼び出しから応答を返すにはどうすればよいですか?」に対する @Felix Kling の回答。同期フローと非同期フロー、および「コードの再構築」セクションについて説明している彼の優れた回答を参照してください。
  @Benjamin Gruenbaum も同じスレッドで非同期性の説明に多大な労力を費やしています。

• @Matt Esch の「fs.readFile からデータを取得する」への回答非同期性についても非常にわかりやすく説明しています。

目の前の質問に対する答え

まず、共通の動作をたどってみましょう。すべての例で、 は関数outerScopeVar内で変更されます。その関数は明らかにすぐには実行されず、引数として割り当てられるか渡されます。これをコールバックと呼びます。

ここで問題になるのは、そのコールバックがいつ呼び出されるかということです。

それはケースによって異なります。もう一度、いくつかの一般的な動作をトレースしてみましょう。

• img.onload画像が正常に読み込まれたときに、将来呼び出される可能性があります。
• setTimeout遅延が経過し、タイムアウトが によってキャンセルされていない場合、将来的に呼び出される可能性がありますclearTimeout。注: 遅延として使用する場合でも0、すべてのブラウザには最小のタイムアウト遅延キャップがあります (HTML5 仕様では 4 ミリ秒に指定されています)。
• jQuery$.postのコールバックは、Ajax リクエストが正常に完了したときに、将来呼び出される可能性があります。
• Node.js は、ファイルが正常に読み取られたとき、またはエラーがスローされたときに、将来fs.readFile呼び出される可能性があります。

いずれの場合も、将来実行される可能性のあるコールバックがあります。この「将来実行される可能性のある」を、非同期フローと呼びます。

非同期実行は同期フローから押し出されます。つまり、同期コード スタックの実行中は、非同期コードは実行されません。これが、JavaScript がシングル スレッドであることを意味します。

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

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

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

実に簡単です。非同期関数の実行に依存するロジックは、この非同期関数内から開始/呼び出される必要があります。たとえば、コールバック関数内でalertとを移動するconsole.logと、その時点で結果が利用可能になるため、期待どおりの結果が出力されます。

独自のコールバックロジックを実装する

多くの場合、非同期関数の結果を使用してより多くの処理を実行したり、非同期関数が呼び出された場所に応じて結果を使用して異なる処理を実行したりする必要があります。もう少し複雑な例に取り組んでみましょう。

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as an argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback, passing the result as an argument
        callback('Nya');
    }, Math.random() * 2000);
}

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as an argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}