title: How to prevent calling of en event handler twice on fast clicks?
body: <p>There is a button and when user clicks on button, some data is saved to back-end. Issue is when user clicks on button very quickly, event handler is getting executed multiple times.</p>
  <p>This is the code</p>
  <pre><code>var x = 1;
  $('#button').click(function() {
    // Do something
    // Save some data on network
    x++;
    console.log(x);
  });
  </code></pre>
  <p><strong>I want this handler to get executed when user clicks on button just once. Even In case of double or tripple click, this should get executed only once. I just want to avoid quick clicks, this handler can get executed again ofcourse</strong></p>
  <p>I have multiple solutions in my mind like</p>
  <ol>
  <li><p>Define a global variable like <code>IS_BUTTON_HANDLER_WORKING = false</code> and when you enter the handler set it to true and in the end set it to false again. And check if it is true just return from the function.</p>
  </li>
  <li><p>Detach the handler in the beginning and reattach in the end.</p>
  </li>
  </ol>
  <p>Consider you have 25 buttons in your application. What should be the best approach to implement this.</p>
  <p>Take a look at this <a href="http://jsbin.com/eVogOvOB/1/edit?html,js,console,output" rel="noreferrer">Fiddle</a></p>
  <h1>Solution</h1>
  <pre><code>$('#button').click(function() {
     $(this).attr('disabled', true);
    // Do something
    // Save some data on network
    $(this).removeAttr('disabled');
  });
  </code></pre>
  <p><strong>Using this, we are sure that our next handler will get executed only when previous execution has been done completely.</strong></p>