如何正确停止ajax请求

Question

I'm trying to stop an Ajax request when a user click a button. But even if I made use the .abort(); the ajax keep requesting each 2 seconds. Basically, a user wait for an input from the server. If the response is 2, then after 2 second an ajax request need to be call. If the response is 3, then is it good. the function is not called anymore.

I tried different solutions, .arbord(); changed the ajax completely...etc None of the solution worked out. I guess I'm missing some concept here.

////////////////////// 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

Declare the variable jqXHR outside of the CheckStatus() function

<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();
}