title: How to break out of a hanging ajax call and load another page
body: <p>I'm developing a invoice app. Currently i'm using OO php to build invoice-objects.
  The objects themselves contain objects for customer, products, invoice details, firm.</p>
  
  <p>Now i'm working on a page to make an overview. The problem that occurred was, when i had too many invoices (tested with only 1500 dummy invoices, which in time could be a lot more) the building of the php objects took around 7 seconds. I feel this is way too long since this is only for one request. Also since php runs serverside, the page didn't load anything before the objects were all built.
  I was staring at an empty screen for 7 seconds and then got everything in an instant (all on localhost, so online it should be worse).</p>
  
  <p>Since there needs to be more functionality to the page then just being an overview (i.e: creating new invoices, using filters to narrow invoices shown) and I don't want the user to need to wait for the invoices to be built before they can use the other functionality, i changed the way the page works.</p>
  
  <p>Now I first load my basic html structure and only then start getting my invoice data using an $.ajax() call. I built an ajax_loader to notify the user that something is happening. When the call is done the data is shown, but I still have the issue that a user can't do anything. He can click a link/button or whatsoever but it doesn't 'act' until my ajax calls are complete. Once the calls are complete, everything works. Clicking on a link while there is an active call does get the 'click' event registered, but the trigger only happens when ajax is done.</p>
  
  <p>The problem has nothing to do with my ajax calls being synced or not. If anyone has any suggestions on how to overcome this problem, i would much appreciate them.
  My first thoughts would be canceling ajaxcalls but from what I've read up until now I suspect the abort() function won't get the job done.</p>
  
  <p><strong>edit:</strong>
  Doing some more tryouts, I've noticed that everything works while the ajaxcalls are still running,except for loading a page from my own website (domain, server or however I should call it)
  or doing any other ajaxcall that involves the same server
  i.e:</p>
  
  <pre><code>$("#dummyButton").click(function(){  
  window.location='http://www.google.com' //works  
  window.location='index.php'  //doesn't work  
  alert("test"); //works  
  console.log("test"); //works    
  })
  
  a href='http://www.google.com'  //works  
  a href='index.php' //doesnt work 
  </code></pre>
  
  <p>So my guess is the server is busy building my invoice objects, hence it won't accept a new request.
  The following adds to this conclusion:</p>
  
  <pre><code>   console.log("start slow call");  
      slow = $.ajax({  
          a very slow/heavy call  
          success:function(){  
              console.log('end slow call');  
          }  
      });  
      console.log('start fast call');  
      quick = $.ajax({  
          a very quick/lightweight call  
          success: function(){  
              console.log('end fast call');  
          }  
      });  
  </code></pre>
  
  <p>When I do these 2 calls at the same time, the quick call won't finish until the slow one is complete:</p>
  
  <p>console prints:  </p>
  
  <pre><code>start slow call  
  start fast call  
  end slow call  
  end fast call
  </code></pre>
  
  <p>doing both at the same time makes the quick call take 5 seconds(according to firebug), when doing only the quick call it completes in 150ms  </p>
  
  <p>I'd have guessed, before all this, that multiple ajaxcalls would be completed in a parallel way instead of serial.</p>
  
  <pre><code>abort() function: (having my 2 ajaxcalls as globals so i can abort them);  
  
  $("a[href]").click(function(){  
      slow.abort();  
      quick.abort();  
      window.location = "index.php";  
      return false;  
  })  
  </code></pre>
  
  <p>makes the ajaxcalls to be aborted, but <em>still the server keeps executing</em> the code from both calls, hence it will not accept my request to go to index.php until the serversidecode from the ajaxcalls is complete.<br>
  after about 5 seconds (counting in the head) my index.php will start loading</p>
  
  <p>Therefore the following question comes to mind:</p>
  
  <p>Is there any manageable way to cancel all processes the server is running for that specific client?</p>
  
  <p><em>Other thoughts that didn't end up as the root cause:</em></p>
  
  <p>I've already adjusted my invoice constructor, passing it a boolean to determine if the object needs all the info, or only the basic one. This made my ajaxcall(or better the serverside process behind the specific ajaxcall) about 3 seconds shorter (on the 1500 dummy invoices). I could adjust the database and therefore a lot of other stuff on already developed stuff. Or, because building all the invoice objects is the timeconsuming part, i could just do it the non-OO way?</p>
  
  <p>Which makes me kind of sad: this was my first real OOP project, its easy to work with, but apparently there's a lot of trouble on calculation time when dealing with a decent amount of objects.</p>