何も対策を行わず実装してしまうと思いもよらない動作をしてしまうことがあります。今回はその例と対策を紹介します。id="sel2"></select>Ajax以下のようなレスポンスが返ってくるAPIを作成します。「言語」のchangeイベントで「スポーツ」、「食べ物」に言語に適したoptionをセットするを目的とします。(いやそれどこで使うねんというツッコミは野暮)言語で「日本語」を選択した場合の期待する結果は以下です。value="2">ぶっかけうどん</option></select>それではJS部分を実装してみましょう。実行順序のことを全く頭に入れずに実装します。}});いかがでしょうか?正常に動作しそうじゃないですか?結果しかし、このような実装だと正しく動作したりしなかったりするのです。Aさんが動かすと正常に動作したり、Bさんが動かすと以下のような結果になることもあります。value="2">ぶっかけうどん</option></select>うそっしょ?なぜそのようなことが起きるのかJSのコードはなんの対応もなしだとAjaxのレスポンスを待ってくれません。forだけが先に回ってajax_url1(スポーツ)のレスポンスが返ってくる頃にはselect_elmにはsel2のエレメント(食べ物)が代入されているためこのような事象が起こるのです。実行順序を考慮した実装クールではないのですが以下のように対策できます。}});強引な実装ですが、appendするselectエレメントをAjaxのsuccess内で定義することで対策ができます。所感JSでAjaxを使用する時は、実行順序を気にする。(小並感)JSお前えええええええ気になる以下の機能を使うともっとクールな実装ができそうです。はじめにJavascriptで非同期処理を実装する場合、何も対策を行わず実装してしまうと思いもよらない動作をしてしまうことがあります。今回はその例と対策を紹介します。システム開発の話から飲みに行こうって話までなんでもどうぞ。新しいECインフラサービス「lismoa」(https://lismoa.com/)の開発運営を行なっています。コメントをキャンセルメールアドレスが公開されることはありません。コメントを受け付けていません。コメントを受け付けていません。コメントを受け付けていません。