取消AJAX请求如果提交

背景新的：当用户点击一个button其类class1和class2之间切换，并将该数据经由AJAX提交。要确认此数据已保存，服务器将以js（更新按钮HTML）响应。取消AJAX请求如果提交

问题：如果用户点击该按钮比服务器快能（即快速点击的按钮）作出回应，该按钮就会来回切换，一旦服务器响应实际到帐：

用户点击按钮，通过JS改变class2（AJAX提交）
用户点击按钮，通过JS改变class1（AJAX提交）
服务器响应第一个AJAX请求，并刷新HTML到class2
服务器响应第二AJAX请求，并刷新HTML到class1

怎么能Ajax请求被取消，如果一个新的制造？

$('.button').click(function() { 
    $('this').toggleClass('class1 class2') 
    // submit ajax request 
    $.ajax({ 
     url: '/update_link' 
    }) 
});

来源

2016-08-21 Jeremy Lynch

岂不是一个更好的主意，把一个功能上，它使非活动状态几秒钟后，点击该按钮？ – Sander

只需禁用切换，直到异步函数返回响应或超时并返回错误。 – Redu

http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery – epascarello

EDITED

Ajax调用可以通过被中止中止使用的Ajax请求对象方法，但即使使用这种方法不能给出100％的把握是服务器端不处理我们的请求。所以我的主张是阻止用户界面，而不是放弃阿贾克斯调用。

一些更多的信息，有关中止 - How to cancel/abort jQuery AJAX request?

示例框UI：

因此，要阻止我们需要一些变量来保存当前的ajax状态许多Ajax调用，并将其设置为true乞讨（启用ajax），当ajax被调用时将它设置为false，当ajax返回响应时，将它重新设置为true。最重要的是当用户点击时检查这个变量，如果变量为false，则不能调用其他ajax并停止执行。

随着使用中止的例子：

var ajax=null; //our ajax call instance 

$('.button').click(function() { 


    if (ajax!=null){ 

     ajax.abort(); 

     ajax=ajax=$.ajax({ 
      url: '/update_link' 
     }); 
    } 


});

来源

2016-08-21 14:02:33

这是一个解决方案，唯一的问题是，用户不会看到任何改变，当他们继续按下按钮。如果服务器需要5秒钟响应，这将是令人沮丧的 –

在按钮中添加一些负载，例如将其标签更改为 - 正在加载... –

此处的目的是为用户即时更改，而不会延迟。 –

你为什么不干脆禁用按钮，切换班级一旦请求被做了什么？

$('.button').click(function() { 
    $this = $(this); 
    $this.prop('disabled', true); 
    // submit ajax request 
    $.ajax({ 
     url: '/update_link', 
     success: function() { 
      $.toggleClass('class1 class2'); 
      $this.prop('disabled', false); 
     } 
    }) 
});

（点击事件触发如果输入无效不工作）

来源

2016-08-21 14:43:56 Hulothe

取消AJAX请求如果提交

回答

相关问题