AJAX重新加载按钮有时会多次添加相同的消息

Question

我有一个AJAX函数来检查新消息，然后将新消息添加到#message。但是，我的问题是这个函数每20秒触发一次，但每当你点击立即触发该功能的“刷新”按钮时，它就会混乱。这是我的AJAX函数：

function ajaxMail() {
    var message_id = $('.line:first').attr('id');
    jQuery.ajax({ //new mail
        type: 'get',
        dataType: 'text',
        url: "/employee/message/check_mail.php",
        data: {
            latest_id: message_id,
            t: Math.random()
        },
        success: function(data, textStatus) {
            $('#messages_inner').prepend(data);
        }
    });
}

function updateTitles() {
    //if(titleChange !== false) {
    $.get('update.php?type=title', function(data) {
        document.title = data;
    });
    //}
    $.get('update.php?type=header', function(data) {
        $('#heading').html(data);
    });
    $.get('update.php?type=total', function(data) {
        $('#total').html('Total messages: ' + data);
    });
    setTimeout("updateTitles();ajaxMail();", 20000);
}
updateTitles();

对于“刷新”按钮，这就是我使用的：

$(document).ready(function() {
    $('#refresh').click(function() {
        ajaxMail();
        updateTitles();
    });
});

有时，由于按钮或其他原因，相同的确切消息会被添加到消息div之前。 （但是，当我刷新时，当然不再有2个相同的消息）这是一次多次添加相同的消息：

首先，我按下了“刷新”按钮，它会添加新消息。但是大约5秒钟之后，功能再次触发，并且由于某种原因再次预先添加相同的消息。另外你可以看到收件箱数量为2，因为实际上只有2（“Test”和“Test12345”），但由于某种原因，“Test12345”前置了2次。

有谁知道为什么会这样做？如果您需要查看，我还可以提供check_mail.php的代码。

Answer 1

我建议尝试cache:false，即使我发送随机字符串，我也有浏览器缓存ajax请求。 另外，请考虑在再次设置之前清除超时，因为每次按下刷新按钮时都会启动另一个超时。