title: JQuery Prevent Function .click Firing On Every Click
body: <p>When I click a chat on my site I want the messages to be grabbed from the server so I use an $.post request like so :</p>
  
  <pre><code>$("#friendsDiv").on("click", "#aFriend", function(event){
      retrieveMessages();
  }
  </code></pre>
  
  <p>and this is what is in the <code>retrieveMessages</code> function</p>
  
  <pre><code>$.post("PHP/chat.php",
      {
          action:'retrieveMessages',
          last_message: last_message,
          conversation_id:conversation_id
      },
      function(data){
          $("#messages").append(data);
          last_message = $("#messages").find(".aMessage:last").attr("id");
          $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000); 
      }
  );  
  </code></pre>
  
  <p>The issue is that if the button is clicked very quickly multiple post requests will begin before the last_message is updated, this results in many copies of the same messages being displayed. Is there a way to prevent the button being clicked quickly or stop the post request being processed if another of the same request is already being processed?</p>
  
  <p>EDIT
  The <code>#aFreind</code> element is a DIV not a button</p>