[ajax通信]なぜか正しく動いてしまうJSコードの解明

Question

[なにをやったか]
チャットサービスで、5秒おきに非同期通信でメッセージを更新する処理を実装しています。
正しく動いてくれるのはいいですが、それがどうにも不可解でもやもやしているので、
JSに慣れている方に見ていただきたく投稿しました。

以下JSコードです。

  var id = $('.messages .message:last-child').data('messageId'); //1
  var interval = setInterval(function(){ //2
    var insertHTML = '';
    if (window.location.href.match(//groups/\d+/messages/)) {
      $.ajax({
        url: location.href,
        dataType: 'json',
      })
      .done(function(data){
        data.forEach(function(message){ //3
          if (message.id > id) {
            console.log(id)
            console.log(message.id)
            insertHTML += buildHTML(message);
          }
        });
        $('.messages').append(insertHTML);
        scrollToNewest();
      })
      .fail(function(data){
        alert('自動更新できません。更新するにはページを再度読み込んでください。');
      });
    } else {
      clearInterval(interval);
    }
    id = $('.messages .message:last-child').data('messageId');
  }, 5000);

大まかな流れです。
１　ブラウザロード時に表示されているメッセージの中から、HTMLで付与したdata-message-idが最大のものを取得。
２　0.5秒間隔でajaxを発動
3 DBから取得してきたメッセージ全てを検証し、1で取得した最新idより大きい場合はHTMLに追加する

[前提]
投稿自体もajaxで処理し、投稿ボタンを押した瞬間にHTML描画するようにしています。
同時にDBにも保存をしています。

また、idをsetIntervalの外側と終了時に二回取得しているのは、setIntervalの開始直後に取得すると、５秒間に複数投稿があった場合いくつかの投稿が取得できない問題に対処するためです。

[疑問]
この処理では、投稿時にajax処理されたHTMLと、非同期通信時に処理されたHTMLの、２つ同じ投稿がダブって表示されてしまうのではないかと思いました。しかし実際は自分の投稿時は１回のみ表示され、その間に他アカウントから投稿があっても正しく表示されます。

なぜこれで正しく動くことになるのでしょうか。。。プログラムって難しい
というわけで、ぜひご教授いただけますと幸いです。

Comments

[m.ts10806]

コードブロックの冒頭を```xxx のようにxxx部分に言語名記載すると言語にあわせて適切にハイライトしてくれるのでブロックの中に補足を書く必要はありません。　使える言語一覧→https://teratail.com/questions/7119

[yu-smc]

言語指定がうまくできていませんでした。ご指摘ありがとうございます！

[m.ts10806]

ajaxですがlocation.href　と自身を指定しているのはどうしてでしょうか？別途取得用のみのプログラムを設置した方が良いように思うのですが

[x_x]

投稿時には、サーバー通信前に描画しているということでしょうか？

[yu-smc]

mts10806さん ＞ https://qiita.com/yuki-n/items/885f6f059167a7b5aedc　こちらを参考にしました。今回はアプリケーションが小規模なのでこれでもよいかなといった次第です。もし別途プログラムを設置することが強く必要であれば理由を教えていただけるととてもありがたいです。。

[yu-smc]

x_xさん＞　そうです！なにか不備でしょうか？

[x_x]

messageIdが最大をとるということは連番だと思うのですが、ローカルではつけられません。投稿時の自分のメッセージ表示にはmessageIdはついてないということですよね？

[yu-smc]

自分のメッセージを表示する際もDBからidをとってきてそれをmessageIdにしています。

[x_x]

それはサーバー通信後ですよね？ サーバー通信前に描画しているという話ではないのでしょうか？

Answer 1

２　0.5秒間隔でajaxを発動

↑5秒間隔です。

  id = $('.messages .message:last-child').data('messageId');
}, 5000);

↑ここでidを取得しているのは、「5秒間隔のajax通信処理開始直後に最大のidを再取得する」のが目的です。

ajax通信自体は非同期で実行されるので、id再取得後に通信終了後処理（doneの中身）が実行される形になります。

Comments

[yu-smc]

なるほど！
なぜif文の外でidを再取得しているのにajax通信開始直後になるのでしょうか？

[tkturbo]

通信開始（非同期開始）＋→通信中(非同期)→終わったらdone
　　　　　　　　　　　＋→id再取得
↑ajaxの処理が本体処理に対して非同期(ソースコード上の記述位置は処理開始のトリガにすぎず、処理開始の次には以降の行で記述されている処理が順次実行されていく)だからこういう風になるのです。

[yu-smc]

そういうことなのですね、、！知識不足で概念がまだ完璧にはつかめませんが、なんとなくは理解できました。
ご丁寧にありがとうございました！