title: Multiple AJAX requests delay each other
body: <p>I have a long polling request on my page. The script on the server side is set to timeout after 20 seconds.</p>
  
  <p>So, when the long polling is "idling", and the user presses another button, the sending of that new request is delayed until the previous script times out.</p>
  
  <p>I can't see anything wrong with the code on jQuery side. Why is the onclick-event delayed?</p>
  
  <pre><code>function poll()
  {
  $.ajax({
      url: "/xhr/poll/1",
      data: {
          user_id: app.user.id
      },
      type: "POST",
      dataType: "JSON",
      success: pollComplete,
      error: function(response) {
          console.log(response);
      }
  });
  }
  
  function pollComplete()
  {
      poll();
  }
  
  function joinRoom(user_id)
  {
  $.ajax({
      url: "/xhr/room/join",
      dataType: "JSON",
      type: "POST",
      data: {
          user_id: app.user.id,
          room_id: room.id
      }
  });
  }
  
  &lt;button id="join" onclick="javascript:joinRoom(2);"&gt;Join&lt;/button&gt;
  
  ############ PHP Controller on /xhr/poll
  
  $time = time();
  while ((time() - $time) &lt; 20)
  {
      $updates = $db-&gt;getNewStuff();
  
      foreach ($updates-&gt;getResult() as $update)
          $response[] = $update-&gt;getResponse();
  
      if (!empty($response))
          return $response;
      else
          usleep(1 * 1000000);
  
      return 'no-updates';
  }
  </code></pre>
  
  <p>Could the "usleep" be the problem?</p>
  
  <p><img src="https://i.stack.imgur.com/y6XJM.png" alt="XHR Screenshot"></p>