如何為多個ajax調用設置延遲並將綁定按鈕綁定到它們？

Question

我正在構建一個小型應用程序，以對服務器進行多個ajax調用。 每個呼叫應按順序進行，間隔為1秒。 如果單擊停止按鈕，則所有剩余的呼叫都應中止。 我已經嘗試過以下代碼，但無法使其正常工作。 時間間隔不起作用，我也不知道應該在哪里綁定停止按鈕。

<button id="startbtn">Start!</button>
<button id="stoptbn">Stop!</button>

<script>

function makeajax(num) {
  $.ajax({
    type: "POST",
    url: "/testurl",
    data: {
       num: num
    },
    complete: function (result) {
        console.log(num);
        setTimeout(makeajax, 1000);
    } } )
};
$(document).ready(function () {
   $("#startbtn").click(function () {
      var data_array = [1, 2, 3];
      for (var i=0; i < data_array.length; i++) {
          makeajax(data_array[i]);
      };
</script>

Answer 1

不要使用for循環語句：

<button id="startbtn">Start!</button>
<button id="stoptbn">Stop!</button>

<script>
var xhrs = [];
function makeajax(arr) {
  if (arr !== null && arr.length > 0){
    var num = arr.shift();
    var xhr = new XMLHttpRequest();
    xhrs.push(xhr);
    $.ajax({
        type: "POST",
        url: "/testurl",
        xhr : function(){
           return xhr;
        },
        data: {
           num: num
        },
        complete: function (result) {
           if (!(xhr.readyState === 4 && xhr.status === 0)) {
             console.log(num);
             setTimeout(() => makeajax(arr), 1000);
           }
        }
    });
  }
}
$(document).ready(function () {
   $("#startbtn").click(function () {
      var data_array = [1, 2, 3];
      makeajax(data_array);
   });
   $("#stopbtn").click(function () {
      xhrs.forEach(xhr => xhr.abort());
   });
});
</script>

Answer 2

一種方法是這樣。 如果要停止調用下一個Ajax查詢，但仍要處理正在進行的查詢。

var callNr = 0;
var stopId;
var data_array = [1, 2, 3];
var isStopped;
function makeajax() {
  if (!data_array.length || isStopped) { alert('no more queries'); return;}
  num = data_array.shift();
  callNr++;
  $.ajax({
    type: "POST",
    url: "/testurl",
    data: {
       num: num
    },
    complete: function (result) {
        console.log(num);
        if (!isStopped) {
            stopId = setTimeout(makeajax, 1000);
        }
        $("#response").text('Response nr:' + callNr);
    } } );
};
$(document).ready(function () {
   $("#startbtn").click(function () {
      isStopped = false;
      makeajax();
   });
   $("#stoptbn").click(function() {
       clearTimeout(stopId);
       isStopped = true;
       console.log('stopped');
   });
});

<button id="startbtn">Start!</button>
<button id="stoptbn">Stop!</button>
<button id="response">No response yet</button>

JsFiddle

Answer 3

切這個

   function makeajax(num) {
     jqXHR = $.ajax({
        type: "POST",
        url: "/testurl",
        async : false,
        data: {
           num: num
        },
        success: function (result) {
            //Do anything you want
        },
        timeout: 3000
    };

    $("#abortAjax").click(function() { // Id of the button you want to bind 
        $(jqXHR).abort();
    });

    }