質問: $(''); $suggestList.append(dynamicSuggestListItem); dynamicSuggestListItem.append('' + dataName + '').append('' + dataCount + ''); // 5つまで生成 $('.js-profile-edit-suggest-list-item:nth-child(n+6)').remove(); } }, function () { alert('通信に失敗しました。恐れ入りますが、再度操作をお願いいたします。'); } ); }) ``` ### 試したこと ajaxの回し方に着目してアプローチしました。 以下を組み合わせるなどして試行錯誤しました。 1. for inが悪いと思って以下に書き換えた。 for of $.each() 2. ajaxが何回も繰り返されてしまうと思い以下を使用した。 setTimeout() * setTimeout(function () { for (var item in data) { //省略 } } という感じで使用しました。 ここだとインデント効かないので少し見辛くなってます。 すみません。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/e713490cbe8745811f2b760d19daab47.gif) ![より遅い入力](https://teratail.storage.googleapis.com/uploads/contributed_images/52ac302dc29be1980c7cdc84a3faefab.gif) よろしくお願いいたします。
回答: ### 重複チェックがない (※不適切な指摘でした) ~~貼り付けて頂いたアニメーションgifでは、入力速度の遅い「web」でも「Webディレクター」が重複しているので、入力速度の問題ではないように思います。 重複回避の基本は~~ * ~~重複チェックし、重複内容は挿入しない~~ * ~~常に全削除→全挿入~~ ~~ですが、掲示されたコードはどちらもせずに、ただ取得したサジェストコンテンツを挿入するだけです。~~ > > > ``` > > ``` > > ~~こちらの子ノード群をサジェスト出力する度に削除するか、ul要素ノードそのものを毎回、置換するのが比較的簡単な解決法だと思います。~~ ### 削除/追加タイミングの問題 > > > ``` > $('.profile-edit-suggest-list-item').remove(); // 削除 > $.ajax({ > //省略 > } > }) > .then( > function (data) { > // ...(中略)... > $suggestList.append(dynamicSuggestListItem); // 追加 > ``` > > 「非同期通信**前**に削除し、非同期通信**後**に追加していますが、非同期通信中に割り込まれたら、破綻します。 **追加する直前に削除**して下さい。 > > 単にulリストを消去するだけでは、正常に動作しない場合があります。それは、サジェスト取得の通信のレスポンス順序が逆転する場合です。そのような場合でも厳密な動作を期待するなら、ulリストの消去前に、現在表示されている内容が、現在入力されている内容であるかを確認する必要があります。 > > > こちらも対処する場合、Promiseを配列管理する等して、現在より前にリクエストされた通信が生きているなら、中断させるロジックが必要になります。 * XMLHttpRequest.abort() - Web API インターフェイス | MDN ### フローチャート コーディング前にアルゴリズムを手書きで書いたり、フローチャートで図式化する作業を入れると良いと思います。 やみくもにコードを書き換えても、期待通りに動きません。 Re: akiiro_ さん