Question

您好我正在开发一个聊天应用程序，我在我的javascript端偶然发现了一个问题..我的脚本从我的数据库中的html端列出的用户名列表检索数据的方式正在运行..问题是它正确加载但是在我尝试点击另一个用户之后它还会加载对话覆盖当前对话但它会回到第一个加载的对话然后再次加载对话

我的问题摘要：第一次会话覆盖第二次会话然后恢复到第一次会话然后返回到第二次会话并继续...

这是我的Javascript：

var load_target = $('#loads'),

loadThis = function (start_cycle) {
  $.ajax({
    url: 'includes/loadusers.php',
    dataType: 'html',
    type: 'GET',
    success: function (response) {
      load_target
        .html(response);
        $('ul.chat-side-panel li').each(function (i) {
            var stats_li = $(this),
              bullet = stats_li.find('span.bullet'),
              mail = stats_li.find('span.mail'),
              typing = stats_li.find('span.typing-stats');

          bullet.toggleClass('online', (bullet.data('status') == 1))
          bullet.toggleClass('idle2', (bullet.data('status') == 2))
          mail.toggleClass('active', (mail.data('flag') == 1))
          typing.toggleClass('idle', (typing.data('type-status') == 0));



            stats_li.find("a").on("click", function(){
              $('.chatBox input[type="hidden"]').attr('value', $(this).data("userid"));
                  var  user= $(this).data("usernem");
                  var  uid = $(this).data("suid");
                  var rid = $(this).data("userid"),
                data = {chat: uid, rid: rid, name: user};
               id = setInterval(function(){
             $.ajax({
                  url: "includes/handlechat.php",
                  type: "GET",
                  data: data,
                  dataType: 'json',

               success: function(result){
              $("#clog").empty();
                $.each(result, function(rowKey, row) {

                 $("#clog").append('<p ><h4>'+ row.username +':</h4>' + row.message_content + '</p>' );

                });


              }

            })}, 1101);


            });        

        });
    },
    complete: function () {
      if (typeof start_cycle !== 'boolean' || start_cycle) {
        load_target.data('cycle_timer', setTimeout(loadThis, 2500));
      }
    }
  });
}

loadThis(false);
loadThis(true);
clearTimeout(load_target.data('cycle_timer'));



$(document).ready(function(){
  var dS1 = "flag=" + 2, dS0 = "flag=" + 1;
  $("#txtA").on("click, keyup", function(){
    $.ajax({
      type: 'POST',
      url: 'includes/type_notif.php',
      data: dS1,
      success: function (response) { }
    });
  });

  $(document).on("focusout", "#txtA", function(){
    $.ajax({
      type: 'POST',
      url: 'includes/type_notif.php',
      data: dS0,
      success: function (response) { }
    });
  });
});

有人请帮我解决这个问题，我一直在为这个模块工作一周。任何提示和建议都非常感谢。我现在非常渴望得到帮助=（

Answer 1

需要一些代码注释，但问题可能是setTimeOut，它通过一组用户反复循环，而不是只加载一个。也许内容div存储所有数据而无需在用户之间进行清理。试试这个：Open Dev Console（在我的情况下是Chrome）

元素，请参阅聊天div及其内容。也许正在创建多个div。
配置文件：拍摄快照以查看已分离元素的摘要。配置文件是查看内存泄漏的最佳方式。拍摄快照，点击这个新快照并搜索Detached，查看用户1的聊天是否仍然存在，也许循环计时器正在通过分离的元素循环。

提示：清理聊天div而不是追加/ html。我建议使用视图（MVC）。

Answer 2

您是否考虑过网络套接字？您的聊天将以推送模式工作，解决所有问题，提高用户体验和效率。看一下标准tomcat7 dist包中的tomcat7 web应用程序示例。它们基于ajax和web套接字提供了良好的聊天实现

AJAX / Javascript检索数据

2 个答案: