Javascript 如何停止所有活动或挂起的ajax请求？

在我的rails应用程序中，使用jquery滑块。在滑块的停止事件中，存在ajax请求。如果用户不断滑动滑块，就会有太多待处理的ajax请求，我的系统就会挂起。我使用了：

1：

那么

不工作。太多请求仍处于挂起状态。 我不知道它出了什么问题

我尝试使用“jquery节流去盎司”。包括文件“jquery.ba throttle debounce.min.js” 已应用jQuery.debounce来停止滑块的事件

$("#slider").on( "slidestop", $.debounce( 240, slide_stop ) );

---

我试图减少时间延迟。但没有预期的结果。与上面的情况相同。

尝试限制这些请求，如此多的服务器请求可能会导致服务器端的性能问题，因为请记住，每个ajax调用都是一个apache（或任何Web服务器）请求，这会消耗内存和cpu。请记住，过度请求可能导致DDoS

请记住，作为一个用户，我可以随心所欲地开始使用滑块，导致大量请求

您应该添加如下内容：

var requests = [];
var lastCall = (+new Date()); // parenthesis just in case of minify
var timeDiff = 1000;

function sliderStopCallback() { // this will be called each time the slider stop sliding
     if(timeDiff < 400) {
         return;
     }

     abortAll();

     requests.push( $.ajax({
                             type: 'POST',
                             url: 'someurl',
                             success: function(result){}
               }) );
}

function sliderStartCallback() {  // this will be call each time the user start to slide
     timeDiff = (+new Date()) - lastCall;
     lastCall = (+new Date());
}

function abortAll() {
     var l = requests.length;
     while(l--) {
         requests[l].abort && requests[l].abort();  // the if is for the first case mostly, where array is still empty, so no abort method exists.
     }
}

var请求=[]；
var lastCall=（+new Date（））；//括号仅用于缩略
var-timeDiff=1000；
函数sliderStopCallback（）{//每次滑块停止滑动时都会调用此函数
如果（时间差<400）{
返回；
}
abortAll（）；
requests.push（$.ajax({
键入：“POST”，
url:'someurl'，
成功：函数（结果）{}
}) );
}
函数sliderStartCallback（）{//每次用户开始滑动时都会调用此函数
timeDiff=（+new Date（））-lastCall；
lastCall=（+新日期（））；
}
函数abortAll（）{
var l=请求的长度；
而(l--){
requests[l].abort&&requests[l].abort（）；//if主要用于第一种情况，其中数组仍然为空，因此不存在abort方法。
}
}

这样，每个请求将至少在400毫秒内发送，每2秒阻止一次呼叫

这个应该可以工作，但是请注意，我还没有测试过它，所以如果你要尝试它，请记住这是一个一般的想法，而不是一个精确的解决方案

---

祝你好运。

你可以使用这样的插件

此外，正如Javis提到的，最好在发送响应之前加入延迟，这样就不会不必要地用请求使服务器过载。我不使用时差或数组，只保留对上次创建的ajax请求的引用。每次发出新请求时，您都会中止该请求

// just putting these here for example, you would want to associate them with each instance of your slider control. 
var timeout, last_request; 

function slide_stop(event, ui){

   $('span#imgLoader').html('<img src="/assets/ajax-loader.gif">');
   // clear the timeout so a previous request won't be sent
   clearTimeout(timeout) 
   // set the request to be sent in .5 seconds
   timeout = setTimeout(send_request, 500); 
 }

function send_request(){
   // abort the last request if there is one
   if(last_request){
     last_request.abort();
   }
   last_request = $.ajax({
     type: 'get',
     dataType: 'json',
     url: 'some_url',
     data: { is_ajax: true }
   }).done(function(response){       
    $('span#imgLoader').empty();
    // set the last request to null so that you dont abort a completed request 
    //(this might not be necessary)
    last_request = null; 
   });
}

//举个例子，您希望将它们与滑块控件的每个实例相关联。
var超时，最后一个_请求；
功能幻灯片\u停止（事件，用户界面）{
$（'span#imgLoader'）.html（“”）；
//清除超时，这样就不会发送以前的请求
clearTimeout（超时）
//将请求设置为在0.5秒内发送
超时=设置超时（发送请求，500）；
}
函数send_request（）{
//如果有最后一个请求，则中止该请求
如果（上次请求）{
最后一个请求。中止（）；
}
最后一个请求=$.ajax({
键入：“get”，
数据类型：“json”，
url:“一些url”，
数据：{is_ajax:true}
}).done（函数（响应）{
$（'span#imgLoader'）.empty（）；
//将最后一个请求设置为null，这样就不会中止已完成的请求
//（这可能没有必要）
最后一个请求=null；
});
}

如评论中所述，在

slideStop

事件之前，最好不要发送请求。这样，不会在每次更改值时发送请求，因此服务器负载问题就小得多

function ajaxrequest(){
    $.ajax(....);
}

$("#slider").on("slideStop", function() {

    ajaxrequest();

});

---

你有没有考虑过一开始就少提要求？使用超时将请求延迟到用户停止滑动若干毫秒（比如300ms？）之后。最好在检测到请求停止滑动之前不发送请求。否则，控制台将充满中止的警告。进行了少量更正，将$.ajax分配给最后一个请求。不工作，因为它中止了ajax请求，但在此之后机器进入挂起状态。我不明白为什么。是的。。。我在这里试图找到我自己的“非插件”解决方案来解决类似的问题。必须注意的是，您提出的中止连接和重新连接的解决方案并不是充分的证据。我一直在使用

if（$ajax）$ajax.abort（）var requests = [];
var lastCall = (+new Date()); // parenthesis just in case of minify
var timeDiff = 1000;

function sliderStopCallback() { // this will be called each time the slider stop sliding
     if(timeDiff < 400) {
         return;
     }

     abortAll();

     requests.push( $.ajax({
                             type: 'POST',
                             url: 'someurl',
                             success: function(result){}
               }) );
}

function sliderStartCallback() {  // this will be call each time the user start to slide
     timeDiff = (+new Date()) - lastCall;
     lastCall = (+new Date());
}

function abortAll() {
     var l = requests.length;
     while(l--) {
         requests[l].abort && requests[l].abort();  // the if is for the first case mostly, where array is still empty, so no abort method exists.
     }
}

// just putting these here for example, you would want to associate them with each instance of your slider control. 
var timeout, last_request; 

function slide_stop(event, ui){

   $('span#imgLoader').html('<img src="/assets/ajax-loader.gif">');
   // clear the timeout so a previous request won't be sent
   clearTimeout(timeout) 
   // set the request to be sent in .5 seconds
   timeout = setTimeout(send_request, 500); 
 }

function send_request(){
   // abort the last request if there is one
   if(last_request){
     last_request.abort();
   }
   last_request = $.ajax({
     type: 'get',
     dataType: 'json',
     url: 'some_url',
     data: { is_ajax: true }
   }).done(function(response){       
    $('span#imgLoader').empty();
    // set the last request to null so that you dont abort a completed request 
    //(this might not be necessary)
    last_request = null; 
   });
}

function ajaxrequest(){
    $.ajax(....);
}

$("#slider").on("slideStop", function() {

    ajaxrequest();

});