Chrome问题 - 聊天行多次返回

Question

我写了一个小聊天插件，需要在我的网站上使用。它可以在HTML中使用简单的结构，如下所示：

<div id="div_chat"> 
    <ul id="ul_chat"> 
    </ul> 
</div> 

<div id="div_inputchatline"> 
    <input type="text" id="input_chatline" name="input_chatline" value=""> 
    <span id="span_sendchatline">Send</span> 
</div> 

当然，该Span元素上有一个'click'绑定事件。然后，当用户插入消息并点击“发送” span元素，有与调用，插入邮件到MySQL数据库的一个Ajax事件的Javascript功能：

function function_write_newchatline() 
{ 
    var chatline = $('#input_chatline').val(); 

    $.ajax 
    ({ 
    type: "POST", 
    url: "ajax-chat-writenewline.php", //1: ok, 0: errore 
    data: ({'chat_line': chatline}), 
    dataType: "text", 
    cache: false, 
    success: function(ajax_result) 
    { 
     function_get_newchatlines(); 
    } 
    }); 
} 

而且，如果该消息是成功插入到数据库，它调用一个函数读取新信息，并把他们在HTML结构之前，我贴：

function function_get_newchatlines() 
{ 
    $.ajax 
    ({ 
    type: "POST", 
    url: "ajax-chat-loadnewlines.php", //1: ok, 0: errore 
    data: '', 
    dataType: "text", 
    cache: false, 
    success: function(ajax_result) //example of returned string: 'message1>+<message2>+<message3' 
    { 
     //explode new chat lines from returned string 
     var chat_rows = ajax_result.split('>+<'); 
     for (id_row in chat_rows) 
     { 
     //insert row into html 
     $('#ul_chat').prepend('<li>' + chat_rows[id_row] + '</li>'); 
     } 
     $('#span_sendchatline').html('Send'); 
    } 
    }); 
} 

注：“ajax_result”只包含HTML实体，而不是特殊字符，所以即使邮件包含'> + <'，它由用这个JS函数处理之前用Ajax调用的php脚本编码。现在

，来了奇怪的行为：发布新消息时歌剧院，火狐，甚至IE8效果很好，如预期的，就像这样：

但是，当我打开浏览器窗口，我看到这个：

正如可以看到，在镀铬的消息显示多次（增加数各一次，最多8行每消息）。我检查了内部调试查看器，并且它看起来并不像“read new lines”函数被多次调用，所以它应该是与Jquery事件或其他相关的东西。

希望我已经在我的解释清楚，如果你需要任何东西，让我知道:)

谢谢，Erenor。

编辑

正如指出的Shusl，我忘了提，功能function_get_newchatlines()被调用，并定期由一个setInterval(function_get_newchatlines, 2000)成JavaScript。

EDIT2

这里的是从阿贾克斯调用PHP文件中的代码条，以获得新的聊天行（我不认为像“在session_start（）”或MySQL连接的东西在这里需要）

//check if there's a value for "last_line", otherwise put current time (usually the first time a user logs into chat) 
if (!isset($_SESSION['prove_chat']['time_last_line']) || !is_numeric($_SESSION['prove_chat']['time_last_line']) || ($_SESSION['prove_chat']['time_last_line'] <= 0)) 
{ 
    $_SESSION['prove_chat']['time_last_line'] = microtime(true); 
} 

//get new chat lines 
$result = mysql_query("select * from chat_module_lines where line_senttime > {$_SESSION['prove_chat']['time_last_line']} order by line_senttime asc; ", $conn['user']); 
if(!$result || (mysql_num_rows($result) <= 0)) 
{ 
    mysql_close($conn['user']); die('2-No new lines'); 
} 
//php stuff to create the string 
//.... 
die($string_with_chat_lines_to_be_used_into_Javascript); 

无论如何，我认为，如果这个问题是这样的PHP脚本，我会得到在其他浏览器类似的错误，太:)

EDIT4

下面是结合的Click事件的“发送”跨度元素的代码：

$('#span_sendchatline').on('click', function() 
{ 
    //check if there's already a message being sent 
    if ($('#span_sendchatline').html() == 'Send') 
    { 
    //change html content of the span element (will be changed back to "send" 
    //when the Ajax request completes) 
    $('#span_sendchatline').html('Wait..'); 
    //write new line 
    function_write_newchatline(); 
    } 
    //else do nothing 
}); 

（感谢f_puras添加缺少的标签:)

Answer 1

我会做下列之一：

选项1：刚刚在function_write_newchatline（Ajax调用之前

停止计时），并开始第t当ajax调用返回时。

function function_write_newchatline() 
{ 
    var chatline = $('#input_chatline').val(); 

    stop_the_timer(); 
    $.ajax 
    ({ 
    type: "POST", 
    url: "ajax-chat-writenewline.php", //1: ok, 0: errore 
    data: ({'chat_line': chatline}), 
    dataType: "text", 
    cache: false, 
    success: function(ajax_result) 
    { 
     function_get_newchatlines(); 
    }, 
    complete: function() { 
     start_the_timer(); 
    } 
    }); 
} 

选项2：

不叫function_get_newchatlines（）在所有的Ajax调用的成功事件。只让定时器检索聊天条目。

function function_write_newchatline() 
{ 
    var chatline = $('#input_chatline').val(); 

    $.ajax 
    ({ 
    type: "POST", 
    url: "ajax-chat-writenewline.php", //1: ok, 0: errore 
    data: ({'chat_line': chatline}), 
    dataType: "text", 
    cache: false, 
    success: function(ajax_result) 
    { 
     // do nothing 
    } 
    }); 
} 

我认为是function_get_newchatlines（）聊天条目由用户和function_get_newchatlines的周期性（）调用由定时器添加后调用之间的一些竞争状态。

选项3：

使用的setTimeout代替的setInterval。当浏览器忙时，setInterval可能会搞砸了。所以在setTimeout函数结束时再次调用setTimeout。