1

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.
Ribi
  • 121
  • 1
  • 10
  • if you forget IE and forget jQuery then: https://developer.mozilla.org/en-US/docs/Web/API/AbortController#Browser_compatibility – Randy Casburn May 24 '19 at 00:17
  • I think you can try [clearTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) in `CancelRequest`. – Minh Nguyen May 24 '19 at 00:41
  • Thank you for the reply, but I don't think I get it. Basically, the user log in in the index.php. The js script send the request to check if the server got an answer, however the user can decide to stop by clicking a button. I don't understand why the ajax keep running. Thanks again – Ribi May 24 '19 at 00:54
  • I don't think problem is ajax. When you cancle ajax, sometime in event loop has one event `CheckStatus` wait 2s to run, it make the ajax keep running. Use clearTimeout clear this event. Try [my example](https://jsfiddle.net/zzkyuubizz/h4mr2sgL/2/), when you not use clearTimeout, ajax keep running – Minh Nguyen May 24 '19 at 07:29
  • Answer already given here... https://stackoverflow.com/questions/4551175/how-to-cancel-abort-jquery-ajax-request/4551178 – Vikash Pathak May 24 '19 at 09:06

1 Answers1

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();
}
Sirisha
  • 141
  • 4