Question

我与长轮询进行了简单的聊天。聊天有2行对话（或更多）。每行都有一个唯一的ID和一些要显示的消息。当我点击第一行时，为了显示此对话的消息，我启动了一个ajax，它会持续存在于服务器端的循环中。但是，当我点击第二行时，我需要结束之前的ajax并开始一个新的。

我尝试了一些类似下面的选项，但我找不到解决方案。

$('li.chat-conversation').on('click', function(){
var requestRunning = true;
var xhr;
var id = $(this).attr('data-conversation-id');

var ajaxOpt = {...};

var fn = function(){
    xhr = $.ajax(ajaxOpt);
    if(requestRunning){
        xhr.abort();
        requestRunning = false;
    }
};
var interval = setInterval(fn, 2000);
});

任何人都可以帮我弄清楚这个逻辑吗？注意： setInterval 仅供参考。

Answer 1

事实证明，服务器响应通过“append”插入到div中。当我点击另一个对话时，他们正在运行2 ajax在同一时间。 div正在改变内容，即在内容中请求，附加第一个会话的消息，并在其他请求，请附加第二个会话的消息。

只需检查SPPoint值，如果不是xhr.readystate，请中止请求并清除与该请求相关的对话。

如果您没有在所有正确的位置设置标记，使用您自己的布尔标记跟踪活动请求很容易与多个请求不同步。但 readystate 属性使我们无需管理其中任何内容。

此外，您可能需要在取消AJAX请求时取消间隔计时器。

Answer 2

将xhr移到点击处理程序范围之外，并检查点击事件是否存在：

var xhr = null;

$('li.chat-conversation').on('click', function() {
  var id = $(this).data('conversation-id');

  var ajaxOpt = {...};

  // when ajax request finished (does not matter success or failed)
  ajaxOpt.complete = function() { 
    xhr = null;
  };

  if(xhr) {
    xhr.abort(); 
  }
  xhr = $.ajax(ajaxOpt);
});

附：扩展我自己的榜样（：

Ajax中止不会因点击而中止，并且重复请求

2 个答案: