Question

我有这个点击处理程序，它有一个ajax调用来取回一些数据，我在发送之前设置了一个标志并完全清除它。我面临的问题是。当我厌倦了两次点击时，过程如下所示。我想知道什么是解决这个问题的更好方法。我考虑过$.active来查找那些活跃的ajax调用的数量，但这看起来并不正确

1删除已启动，设置标志，

2删除已启动，设置标记。

1删除响应已完成，重新加载并清除标记。

2删除响应已完成，重新加载（由于1响应清除了标记，因此添加了我不想要的默认值）。

$(document).on('click', '#remove', function () {
  $.ajax({
  type: 'POST',
  url: '/remove'
  data: {
    fruits: $(this).val()
  },
  beforeSend: function () {
     $('#fruit-table').addClass('loading');
  }, 
  success: function (data) {
    loadFruitTable(data);
  },
  complete: function () {
    $('#fruit-table').removeClass('loading');
  }
};

loadFruitTable = function (data) {
  $('#fruit-table').html(data);
  if ($('.processing').length) {
    preLoadDefault();
  } 
};

Answer 1

只是一个想法：在点击时禁用删除按钮并在完整部分中启用它？

Answer 2

您可以使用.ajaxStart来显示加载对象，使用.ajaxComplete来处理所有正在加载的数据的事件：

$( document ).ajaxStart(function() {
  $( ".log" ).text( "Triggered ajaxStart handler." );
});

$( document ).ajaxComplete(function() {
  $( ".log" ).text( "Triggered ajaxComplete handler." );
});

http://api.jquery.com/ajaxComplete/

Answer 3

$(document).on('click', '#remove', function () {
  var $fruitTable = $('#fruit-table');

  if ($fruitTable.hasClass('loading')) {
    return;
  }

  $fruitTable.addClass('loading');

  $.ajax({
    type: 'POST',
    url: '/remove'
    data: {
      fruits: $(this).val()
  })
  .then(loadFruitTable, function () {})
  .then(reinitFruitTableStatus);
};

var reinitFruitTableStatus = function () {
  $('#fruit-table').removeClass('loading');
};

loadFruitTable = function (data) {
  $('#fruit-table').html(data);
  if ($('.processing').length) {
    preLoadDefault();
  } 
};

如果未动态创建元素#fruit-table，则应将其存储在上述整个代码中可用的变量中。

Answer 4

实际上......我没有添加一个类，而是添加了一个计数，它在beforeSend中递增，在complete中递减。这样，我总能检查是否有任何活动过程。

多个ajax的想法响应在完成点击时删除加载标志

4 个答案: