Question

这是我的ajax功能

function repeatedCall() {    
    $.ajax({
        url: '/getUrl',
        complete: function(data) {   
            if (data.statusText != "error") {
                //my actions    
            }    
        }   
    })    
}

setInterval(repeatedCall, 5000); //To make repeated ajax calls

function updateData_function{   
     //I want to abort all previous ajax calls and make a new ajax call since it will update the data     
}

我可以使用clearInterval但挂起的调用不会被中止，因此它没有正确更新。

如果进入我的updateData_function，如何重复调用并同时中止所有请求。

此updateData_function将具有新值，因此我需要发出新的ajax请求。

我该怎么做？请帮忙！！非常感谢提前!!

Answer 1

使用setInterval进行重复调用不是一个好习惯。假设您之前的请求未完成，那么进行相同的ajax调用是没有意义的。此外，正如您可能知道的那样，之前的ajax调用的响应可能在最近的ajax响应之后发生。因此，最好中止任何先前的ajax调用。

我认为以下解决方案可以解决您的问题：

解决方案1：只是夸大你所做的事情：

var xhr

function repeatedCall() {
  if(xhr){
    // abort any previous calls, to avoid any inconsistency
    xhr.abort()
  }
  xhr = $.ajax({
    url: '/getUrl',
    complete: function(data) {
      if (data.statusText != "error") {
        //my actions
      }
    }
  })
}
setInterval(repeatedCall, 5000)
function updateData_function {
  //I want to abort all previous ajax calls and make a new ajax call since it will update the data 
  if(xhr){
    xhr.abort()
  }
}

解决方案2：我认为更好的方法

var xhr;

function repeatedCall() {
  xhr = $.ajax({
    url: '/getUrl',
    complete: function(data) {
      if (data.statusText != "error") {
        //my actions
        // Call the ajax call again:
        setTimeout(repeatedCall, 5000)
      }
    }
  })
}

function updateData_function {
  //I want to abort all previous ajax calls and make a new ajax call since it will update the data 
  if(xhr){
    xhr.abort()
  }
  // do something
}
// somewhere - to initiate the repeatedCall for the first time
repeatedCall()

Answer 2

我之前也遇到了同样的问题，我发送了许多针对keyup的ajax调用，导致我的网站崩溃。我找到了setTimeout（）的解决方案;在ajax中所有触发并保持触发功能再次清除超时和settimeout。这可以让你在按下很多次的时候只发射一次ajax。

编辑：好的例如我有一个搜索框，它通过带onkeyup函数的ajax调用获得预定义的建议。因为我开始输入它一次又一次地发出ajax调用并且卡住了。我开始取消之前的一个，因为我解雇了另一个如此固定的情况。这是 DEMO 无论你按下按钮多少次，它只会触发一次。

Answer 3

我已经修改了我的代码并且这可行

    abortValue = false;
    var xhr;
    xhrPool = [];
    var trying;

    function abortAjax() {
        $.each(xhrPool, function(idx, jqXHR) {
            jqXHR.abort();

        });

    }
    $(document).ready(function() {
        fn = function() {
            xhr = $.ajax({
                url: '/getUrl',
                beforeSend: function(jqXHR) {
                    xhrPool.push(jqXHR);
                },
                complete: function(jqXHR, data) {
                    if (abortValue == true) {
                        abortAjax()
                    } else {
                        if (jqXHR.statusText != "error" && "undefined") {
                            //myactions

                        }

                    }
                }
            });

        };

        var interval = setInterval(fn, 5000);
    });


    function updateData_function {
        //I want to abort all previous ajax calls and make a new ajax call since it will update the data

        abortValue = true;
        abortAjax();
        abortValue = false;
        fn();
}

如何进行重复的ajax调用并中止当它进入某个特定函数时尚未完成的所有先前调用？

3 个答案: