Cancel XHR request

Question

I have:

function send(){
  $.get("/site/send.php", function(data){
    alert(data);
  }
}

In site/send.php I have:

sleep(1000)
echo "OK";

Next I have in my js file:

send();
$("#click").click(function(){
  $.get("/site/reset.php", function(data){
    alert(data);
  }
})

and in reset.php:

echo "RESET";

In this example I have XHR until sleep < 1000. In Firebug I see this. I don't have response and succes in function send() until sleep is < 1000. this is ok, but I would like cancel this request if I use .click().

Now I have all time function send() and until she does not stop (> 1000) then I don't have start with function with .click(). Why this is not async?

Is this possible? Maybe it is possible to cancel all request on the site?

Answer 1

You'll have to keep a reference to your XHR object, in order to abort it.

Something like this:

var myXhr = null;
$("#click").click(function(){
  myXhr = $.get("/site/reset.php", function(data){
    alert(data);
  });
})

And then to abort:

if (myXhr) {
  myXhr.abort();
}

Although I'm really unsure about the syntax.

You might want to look at some similiar questions.