title: Send information about clicked link to the server before redirect
body: <p>We're creating a click tracking app, that builds heatmaps. I'm writing a script which users are suppose to insert into their pages for tracking to work. </p>
  
  <p>It works fine on elements, which doesn't require a redirect or form submit. For example, if I click on <code>h1</code> or <code>p</code> or whatever, it works perfectly correct. But, if I click on a <code>a</code>, request to our server never happens before the normal redirect. </p>
  
  <p>In the last couple of days I tried a lot of ways to do that. First of, I tried a normal AJAX call, since it was a cross-domain request I had to use JSONP, but again, that AJAX call did not have time to execute before the redirect. Adding <code>async: false</code> would have solved the problem, but it doesn't work with JSONP requests. So I decided to add a flag variable which indicates that it is safe to move on with redirect and used an empty while loop to wait until it becomes try in the ajax callback. But the while loop was blocking the execution flow, so callback never got a chance to set that variable to <code>true</code>. Here is some simplified code:</p>
  
  <pre><code>$(document).on('click', function (e) {
      //part of the code is omitted 
      $.ajax({
          url: baseUrl,
          data: data,
          type: "get",
          dataType: "jsonp",
          crossDomain: true,
          complete: function (xhr, status,) {
              itsSafeToMoveOn = true;
          }
      });
  
      while(!itsSafeToMoveOn){}
  
      return true;
  });
  </code></pre>
  
  <p>The next thing I tried is to use <code>unload</code> page event to wait until total ajax calls in progress would become zero (I had a counter implemented) and then to move on with redirect. It worked in Firefox and IE, but in WebKit there was this error:</p>
  
  <pre><code>Error: Too much time spent in unload handler
  </code></pre>
  
  <p>After that I realized that I don't care about the server response and using <code>img.src</code> for the request would be an ideal fit for this case. So at this point code looks like this:</p>
  
  <pre><code>$(document).click(function (e) {
      //part of the code is ommited
      (new Image).src = baseUrl + '?' + data;
  
      if (tag === "a" || clickedElement.parents().has("a")) {
          sleep(100); 
      }
  
      return true;
  });
  </code></pre>
  
  <p>That way I increased the overall script performance slightly, but problem with links remains unchanged. The <code>sleep</code> function appears to be also blocking the execution flow and request never happens.</p>
  
  <p>The only idea left is to return <code>false</code> from the event handler and than redirect manually to the clicked element's <code>href</code> or to call <code>submit()</code> on the form, but it will complicate things to much and believe me it's already a huge pain in the ass to debug this script in different browsers.  </p>
  
  <p>Does anyone have any other ideas?</p>