中止后AJAX继续/恢复

时间:2016-11-24 12:24:00

标签: javascript jquery ajax

大家好,

我想问一下是否有可能继续中止ajax。我在这样的defferreds中得到了ajax调用arraz:

var defferreds = [];
defferreds.push(
    $soap.ajax({
        type: "POST",
        dataType: "json",
        url: "some_url.php",
        cache: false,    
    }).done(function(data) {
        /* do something */ 
    }).fail(function(jqXHR,status, errorThrown) {
        console.log(jqXHR.responseText);
    })
);

defferreds数组中还有20多个ajax。当用户点击abort_ajax按钮时,它应该中止所有尚未完成的ajax。我使用此函数来执行此操作:

function abort_ajaxes(){
    for(var i = 0; i < defferreds.length; i++){
        if(defferreds[i] && defferreds[i].readyState != 4){
            defferreds[i].abort();
        } else {
            delete defferreds[i];
        }
    }
}

这是我需要你帮助的部分。一旦用户点击resume_ajax按钮,它应该从defferreds数组中调用剩余的ajaxes并完成它们。问题是,我不知道如何开始中止ajax,即使我将它存储在我的defferreds数组中。 是否有可能恢复中止的ajaxes?只有那些流产的而不是那些已经成功的人才会结束?

修改 我问是否有可能重新运行只是没有完成ajaxes。我尝试了here中使用的解决方案,但它并没有解决我的具体问题。一旦我点击resume_ajax按钮就没有任何反应,即使我使用了这段代码:

$('.resume_ajax').click(function(){
    for (var key in defferreds){
        $soap.ajax(defferreds[key]);
    }
});

再次调用aborted ajax的确切代码行是什么?甚至可以用我的defferreds数组中的ajax调用实现它吗?因为正如我所说,没有任何事情发生。

EDIT2:

我像这样运行ajaxes:

function run_ajaxes(){
    var defferreds = [];
    /* there are around 20 same ajax calls just with another url */
    defferreds.push(
        $soap.ajax({
            type: "POST",
            dataType: "json",
            url: "some_url.php",
            cache: false,    
        }).done(function(data) {
            /* do something */ 
        }).fail(function(jqXHR,status, errorThrown) {
            console.log(jqXHR.responseText);
        })
    );
}

$('.run_ajaxes').click(function(){
    run_ajaxes();
});

1 个答案:

答案 0 :(得分:1)

我为你做了一个非常简单的解决方案。在这里,我有一个用于进度报告的outpu div,以及两个按钮abort,当它被点击时将中止所有仍在运行的请求,以及continue按钮,它将恢复执行中止要求。

要测试解决方案,请先按continue按钮。我使用https://httpbin.org/delay模型服务器来模拟请求。在仍有一些正在运行的请求时按下abort按钮。然后再次按continue按钮 - 这将开始执行所有撤消的请求。这是代码

var output = $("#output");
var ajaxes = [];
var count = 10;

// Function which will run the ajax call
function run(idx) {
  // Get the ajax args
  var args = $.extend({}, ajaxes[idx]);
  
  // Run the ajax and replace the args with ajax deferred
  ajaxes[idx] = $.ajax(args)
    .done(function() {
  	  $(output.find("p")[idx]).html("done");
    })
    .fail(function() {
  	  $(output.find("p")[idx]).html("aborted");
      // Replace the ajax deferred with the original ajax args
      ajaxes[idx] = args;
    });
}

for(var i = 0; i < count; i++) {
  // Create output element to report progress for each ajax call
  output.append("<p>sleeping</p>");
  
  // Custom delayed response 
  var delay = Math.floor((Math.random() * 5) + 1);
  
  // Create ajax arguments
  var args = {
    type: "GET",
    dataType: "json",
    url: "https://httpbin.org/delay/" + delay
  };
  
  // Store the ajax args
  ajaxes[i] = args;
}

$("#abort").on("click", function() {
  for(var i = 0; i < count; i++) {
  	// Abort each undone ajax call
    if(ajaxes[i].readyState != 4) {
      ajaxes[i].abort();
    }
  }
});

$("#continue").on("click", function() {
  for(var i = 0; i < count; i++) {
  	// Run all ajax call that where not finished yet
    if(!ajaxes[i].readyState) {
    	$(output.find("p")[i]).html("... loading");
      run(i);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="continue">continue</button>
<button id="abort">abort</button>
<div id="output"></div>