JavaScriptでの同期と非同期の理解 - パート2

この記事の最初の部分では、 同期と非同期の概念 知覚される JavaScriptで. この第二部では、X氏は私たちが理解するのを助けるために再び現れます setTimeoutとAJAXのしくみ API 作業.

奇妙な要求

X氏の話とあなたが残しておきたい映画に戻りましょう。あなたが遠出の前にX氏に任務を任せ、彼がこの任務に取り組むことができるようになると彼に言いなさい 5時間後に彼はあなたのメッセージを得ました.

彼はそれに満足していません、覚えておいてください、彼は彼が現在のメッセージをやり終えるまで新しいメッセージを受け取りません。 待つ必要があります五時間 タスクを始めることすらあります。だから、時間を無駄にしないために、 ヘルパーをもたらす, H氏.

待つ代わりに、彼はH氏に タスクの新しいメッセージをキューに残す 与えられた時間が経過した後、そして次のメッセージに進む.

過去5時間H氏 キューを更新します 新しいメッセージで。 H氏の前に発生したメッセージをすべて処理した後、X氏 あなたの要求されたタスクを実行します. だから、このように、あなたはになるための要求を残すことができます 後で遵守しました, それが満たされるまで待つな.

しかし、なぜHさんがXさんに直接連絡するのではなく、メッセージをキューに残すのですか？最初の部分で述べたように、のみ Xさんに連絡する方法は 彼にメッセージを残すことによって 電話で - 例外なし.

1. `setTimeout（）` 方法

必要なコードのセットがあるとします。 一定時間後に実行する. それをするために、あなただけ 関数でラップする, そして に追加 setTimeout（） 方法 遅延時間と共に。の構文 setTimeout（） 以下のとおりであります：

 setTimeout（関数、遅延時間、引数…）

の 引数は… parameterは関数が取る引数を表します。 遅延時間 ミリ秒単位で追加されます。以下に、あなたが出力する簡単なコード例を見ることができます。 “ちょっと” 3秒後にコンソールで.

 setTimeout（function（）console.log（ 'hey'）、3000）;

一度 setTimeout（） 実行を開始, 呼び出しスタックをブロックする代わりに 指示された遅延時間が終わるまで、 タイマーが作動します, そしてコールスタックは次のメッセージのために徐々に空にされます（Mr XとMr Hの間の対応と同様に）.

タイマーが切れると、新しいメッセージ キューに参加する, その前にすべてのメッセージを処理した後にコールスタックが解放されると、イベントループがそれを検出します。したがって、コードは非同期に実行されます。.

2. AJAX

AJAX（Asynchronous JavaScript and XML）は、 XMLHttpRequest （XHR）APIを サーバー要求を出す そして 応答を処理する.

ブラウザがXMLHttpRequestを使用せずにサーバー要求を行うと、 ページの更新 そして そのUIをリロードします. 要求と応答の処理がXHR APIによって処理されるとき 影響を受けないUI.

だから、基本的に目標は ページをリロードせずにリクエストを行う. 今、どこですか “非同期” これで？ XHRコードを使用するだけで（これについては後で説明します）、AJAXという意味ではありません。XHRAPIでは、 同期的および非同期的に機能する.

XHR デフォルトで に設定されています 非同期に動作する;関数がXHRを使って要求を出すとき、それは 応答を待たずに戻る.

XHRが 同期する, その後、関数は 応答が受信され処理されます 戻る前.

コード例1

この例では XMLHttpRequest オブジェクト作成. の 開いた（） method、リクエストURLを検証し、 send（） メソッドがリクエストを送信.

 var xhr = new XMLHttpRequest（）; xhr.open（ "GET"、url）; xhr.send（）;

後の応答データへの直接アクセス send（） 無駄になるでしょう、なぜなら send（） 待てない 要求が完了するまで。 XMLHTTPRequestはデフォルトで非同期に動作するように設定されています。.

コード例2

の hello.txt この例のfileは、テキスト 'hello'を含む単純なテキストファイルです。の 応答 XHRのプロパティはテキスト 'hello'を出力しなかったので無効です。.

 var xhr = new XMLHttpRequest（）; xhr.open（ "GET"、 "hello.txt"）; xhr.send（）; document.write（xhr.response）; //空の文字列

XHRはマイクロルーチンを実装しています。 応答をチェックし続ける ミリ秒ごとに 無料のイベントを引き起こす 異なった州のために要求は通ります。レスポンスが読み込まれたとき, ロードイベントはXHRによって引き起こされる, 有効な応答を配信できます.

 var xhr = new XMLHttpRequest（）; xhr.open（ "GET"、 "hello.txt"）; xhr.send（）; xhr.onload = function（）document.write（this.response） //ドキュメントに 'hello'を書き込みます

loadイベント内のレスポンス 'hello'を出力します, 正しいテキスト.

リクエストが完了するまで他のスクリプトをブロックしないため、非同期の方法を使用することをお勧めします。.

応答を同期的に処理する必要がある場合は、 偽 の最後の引数として 開いた, どっち XHR APIにフラグを立てる それを言って 同期している必要があります （デフォルトでの最後の引数 開いた です 本当の, 明示的に指定する必要はありません）.

 var xhr = new XMLHttpRequest（）; xhr.open（ "GET"、 "hello.txt"、false）; xhr.send（）; document.write（xhr.response）; //ドキュメントに 'hello'を書き込みます

なぜこれをすべて学ぶのか?

ほとんどすべての初心者は、次のような非同期の概念で間違いを犯します。 setTimeout（） たとえば、AJAX setTimeout（） 遅延時間後、またはAJAX要求を行う関数内で直接応答を処理することによってコードを実行します。.

パズルがどのように当てはまるかを知っていれば、 そのような混乱を避ける. あなたはその遅延時間が setTimeout（） 時間を示していません コードの実行開始時, しかし時間 タイマーが切れるとき そして、新しいメッセージが待ち行列に入れられます、それは呼び出しスタックが自由にそうすることができるときだけ処理されるでしょう.