Как правильно остановить ajax-запрос

Question

Я пытаюсь остановить Ajax-запрос, когда пользователь нажимает кнопку. Но даже если бы я использовал .abort (); Аякс продолжает запрашивать каждые 2 секунды. В основном, пользователь ждет ввода от сервера. Если ответ равен 2, то через 2 секунды необходимо вызвать ajax-запрос. Если ответ 3, то это хорошо. функция больше не вызывается.

Я пробовал разные решения, .arbord (); полностью изменили ajax ... и т.д. Ни одно из решений не сработало. Я предполагаю, что здесь отсутствует какая-то концепция.

////////////////////// index.php 
.
<button id="cancel" onclick="CancelRequest()">Cancel</button>
.
<script>
function CheckStatus(){

var jqXHR = $.ajax({ 
   url: "status.php",
   async: true,
   cache: false,
   type: "POST",
   data: {data: id},
   success: function(response){
      var response;
if (response == 2) {
    alert(response);
    setTimeout(CheckStatus, 2000);   /// NEED TO SEND THE REQUEST AJAX REQUEST AGAIN, the response needs to be 3
} else if (response == 3) { 
    alert("good");
} else {
    alert("error");
}     
}
}); 

}

CheckStatus(); // start ajax automatically
}


//cancel request if the user press a button

function CancelRequest() {
    jqXHR.abort();

}
</script>


///////////////////////////////////// status.php 

$number = $_POST['id'];
.
.
.
.
$number = 2;

if ($number['status'] === 3) {
    echo "good";
} elseif ($result['status'] == 2) {
    echo "repeat again";
} else {
    echo "error";
}

I expect that when I call jqXHR.abort(); the ajax should stop. However it keep going forever.

Answer 1

Объявите переменную jqXHR вне функции CheckStatus()

<script>
var jqXHR; 
function CheckStatus(){
   jqXHR = $.ajax({ 
      url: "status.php",
      async: true,
      cache: false,
      type: "POST",
      data: {data: id},
      success: function(response){
               var response;
               if (response == 2) {
                 alert(response);
                 setTimeout(CheckStatus, 2000);   /// NEED TO SEND THE REQUEST AJAX REQUEST AGAIN, the response needs to be 3
               } else if (response == 3) { 
                  alert("good");
               } else {
                 alert("error");
               }     
          }
   }); 
}

 CheckStatus(); // start ajax automatically
}


//cancel request if the user press a button
function CancelRequest() {
    jqXHR.abort();
}