Rails UJS：在触发新的 ajax 请求时中止先前触发但仍处于活动状态的 ajax 请求

Question

我在 Rails 4.2 应用程序上有一个 Ruby。

我有 3 个按钮触发 ajax 请求 Rails UJS

<section id="buttons"> 
  <%= link_to image_tag(image),
        button1_modal_path,
        remote: true, 
        id:"icon1",
        data: { disable_with: '' } %>
  <%= link_to image_tag(image),
        button2_modal_path,
        remote: true, 
        id:"icon2",
        data: { disable_with: '' } %>
  <%= link_to image_tag(image),
        button3_modal_path,
        remote: true, 
        id:"icon3",
        data: { disable_with: '' } %>
</section>

我希望实现以下模式：

用户点击按钮 1 启动一个 ajx xhr 请求（我们称之为 ajaxRequest1）
ajax 仍在处理中（无论它处于什么状态：已发送，已由服务器处理，正在返回...）但尚未到达（200 ) 并且用户点击按钮 2 触发另一个 xhr ajax 请求 (ajaxRequest2)
在这种情况下，我希望取消所有其他活动的 ajax 请求（也就是说，在这种情况下 ajaxRequest1）。如果不止一个请求，它将取消所有请求，除了最后一个 ajax 请求（即 ajaxRequest2）

我使用 Rails UJS ajax events 尝试过，但它不起作用（它实际上取消了任何 ajax 请求被触发:(:

on('ajax:beforeSend',function(event, xhr, settings){
  xhr.onreadystatechange = null;
  xhr.abort();
}

注意：我希望在最好的情况下，我不仅要取消浏览器正在等待 ajax 请求 return 并显示其内容的事实，还要 ALSO如果请求已经启动但尚未到达服务器，它会在它到达服务器之前被取消，以免服务器因无用的 ajax 请求.

而过载

Answer 1

要取消请求1，需要根据请求1在XMLHttpRequest对象上调用abort，例如

ajaxRequest1.abort();

您的代码的意思是在请求发送之前中止请求。

on('ajax:beforeSend',function(event, xhr, settings){
  xhr.onreadystatechange = null;
  xhr.abort();
}

Answer 2

如果任何时候只有一个 rails 远程调用运行，您可以记住当前的 XHR 并在新的 XHR 启动时中止它，即

var currentXhr;
currentXhr = null;

$(document).on('ajax:send', function(_event, xhr) {
  if (currentXhr) {
    currentXhr.abort();
  }
  currentXhr = xhr;
  return true;
});
$(document).on('ajax:complete', function(_event, _xhr, _status) {
  currentXhr = null;
});

Rails UJS：在触发新的 ajax 请求时中止先前触发但仍处于活动状态的 ajax 请求

Rails UJS: abort previously triggered but still active ajax requests when triggering a new ajax request

ruby

ruby-on-rails

ujs

ruby-on-rails-4