[なにをやったか]
チャットサービスで、5秒おきに非同期通信でメッセージを更新する処理を実装しています。
正しく動いてくれるのはいいですが、それがどうにも不可解でもやもやしているので、
JSに慣れている方に見ていただきたく投稿しました。
以下JSコードです。
js
1 var id = $('.messages .message:last-child').data('messageId'); //1 2 var interval = setInterval(function(){ //2 3 var insertHTML = ''; 4 if (window.location.href.match(//groups/\d+/messages/)) { 5 $.ajax({ 6 url: location.href, 7 dataType: 'json', 8 }) 9 .done(function(data){ 10 data.forEach(function(message){ //3 11 if (message.id > id) { 12 console.log(id) 13 console.log(message.id) 14 insertHTML += buildHTML(message); 15 } 16 }); 17 $('.messages').append(insertHTML); 18 scrollToNewest(); 19 }) 20 .fail(function(data){ 21 alert('自動更新できません。更新するにはページを再度読み込んでください。'); 22 }); 23 } else { 24 clearInterval(interval); 25 } 26 id = $('.messages .message:last-child').data('messageId'); 27 }, 5000);
大まかな流れです。
1 ブラウザロード時に表示されているメッセージの中から、HTMLで付与したdata-message-idが最大のものを取得。
2 0.5秒間隔でajaxを発動
3 DBから取得してきたメッセージ全てを検証し、1で取得した最新idより大きい場合はHTMLに追加する
[前提]
投稿自体もajaxで処理し、投稿ボタンを押した瞬間にHTML描画するようにしています。
同時にDBにも保存をしています。
また、idをsetIntervalの外側と終了時に二回取得しているのは、setIntervalの開始直後に取得すると、5秒間に複数投稿があった場合いくつかの投稿が取得できない問題に対処するためです。
[疑問]
この処理では、投稿時にajax処理されたHTMLと、非同期通信時に処理されたHTMLの、2つ同じ投稿がダブって表示されてしまうのではないかと思いました。しかし実際は自分の投稿時は1回のみ表示され、その間に他アカウントから投稿があっても正しく表示されます。
なぜこれで正しく動くことになるのでしょうか。。。プログラムって難しい
というわけで、ぜひご教授いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー