javascript - jQuery 轮询聊天 - 重复条目

Question

这是我的场景:

• 每当用户发送一条新消息时，我都会将它作为一个预览附加到对话线程，同时一个 HTTP POST请求将其保存到服务器。
• 在一个区间内，使用 setInterval ，我正在检查对话中的新消息。
• 如果返回任何新消息，我将删除消息的预览版本，然后从数据库中追加任何新消息。

这是生成聊天内容的脚本:

function refresh_chat(){
    var last = $('.conversation li:not(.fake):last').data('id');
    $.post('includes/router.php', {
        task: 'update_conversation',
        id: '<?=$_GET['conversationid']?>',
        last: last
    }, function (data, response) {
        var recibidas = $(data).find('li');

        /* IF there are new entries */
        if (recibidas.length > 0) {
            /* Remove all fake entries */
            $('.conversation li.fake').remove();

            /* Append new entries */
            $('.conversation').append($(data).filter('.notifications').html());

            /* If this new entries are not unread, 
               remove the unread to the previous ones*/
            if(!$(data).find('li:last').hasClass('unread')) {
                $('.conversation li.unread').removeClass('unread');
            }
        }
    });
}

var t = setInterval(function () {   
    refresh_chat();
}, 3000);

这就是我在用户键入时添加新条目的方式:

$('body').on('submit', '.send_message_form_conversation', function(e) {
    e.preventDefault();
    var id_to = $(this).find('#id_to').val();
    var msj = $(this).find('#msj').val();
    if (msj.length >= 2) {
        $(this).find('#msj').val('');
        $(this).find('.nicEdit-main').html('');
        //alert(id_to);
        $('.conversation').append(
            '<li class="unread fake">' +
             '<div class="avatar">' +
              '<a href="index.php?userid=<?=sesion()?>">' +
               '<img alt="" src="<?=$_SESSION['avatar']?>">' +
              '</a>' +
             '</div>' +
             '<div class="txt">' +
              '<a class="userName" href="index.php?userid=<?=sesion()?>">' + 
               '<?=$_SESSION['alias']?> -- ' +
               '<span class="date">' +
                "<?=get_texto_clave('ahora mismo')?>" +
               '</span>' +
              '</a>
             '<span class="msj">' + msj + '</span>' + 
            '</div>' +
            '<span data-id="47" class="close">X</span>' + 
           '</li>');

        $.post('includes/msj.php?', {
            task  : 'post_message',
            id_to : id_to,
            msj   : msj
        }, function (data, response) {
            $(".conversation").scrollTop($(".conversation")[0].scrollHeight);
        });
    } else {
        $(this).parent().effect("shake", { times:0, distance: 3 }, 200);
    }                       
});

如您所见，<li>项目可能有两个类:.fake (这意味着这个项目是用户刚刚提交的内容的预览，并且已经被js追加)或者.unread (这意味着接收方刚刚收到消息)

让我苦苦挣扎的是，有时我开始看到一些重复的条目(尽管只是显示 - 它们在数据库中没有重复)。我猜我的间隔有问题吗？

这可能是什么原因造成的？ (我一直在读它，但我找不到任何奇怪的东西......)

PD:基本上，有些消息不止一次显示 :S

-编辑-

$q = "SELECT * FROM pms " .
     "WHERE ((id_to = $id and id_from = " . sesion() . ") OR " .
     "       (id_from = $id and id_to = " . sesion() . ")) " .
     "AND (id > $from) " .
     "ORDER by fecha ASC " . $limit;

此查询是 $.post() 中使用的查询请求在哪里 $from在 JavaScript 参数中位于最后(表示向用户显示的最后一条消息)

Answer 1

想想场景:

1. refresh_chat() - 请求发送到服务器
2. 3 秒过去
3. refresh_chat() - 发送到服务器的相同请求
4. 对第一个收到的回复。添加了新条目。
5. 收到第二个回复。再次添加相同的条目。

解决这个问题最简单的方法是移除setInterval，并在处理完响应后添加setTimeout。