title: Javascript disable onclick event until it's event is finished
body: <p>How can I temporary disable <code>onclick</code> event until the event is finished?</p>
  <p>So far that's all I've come up with:</p>
  <pre><code>&lt;script&gt;
   function foStuff(a){
       //no modifications here to be done, just some code going on
   }
  
   $(document).ready(function(){
      $(&quot;#btn&quot;).click(function(){
          var obj = $(this);
          var action = obj.prop('onclick');
          obj.prop('onclick','');
          whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
            obj.prop('onclick',action);
          });
      });
   });
  &lt;/script&gt;
  &lt;div id=&quot;btn&quot; onclick=&quot;doStuff(500)&quot;&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>EDIT:
  I've tried it this way: but it doesn't unblock the click event</p>
  <pre><code>$(&quot;#btn&quot;).click(function(){
          var obj = $(this);
          obj.off('click');        
          $.when( doStuff(500) ).then( function(){
              obj.on('click');    //   it actually comes here, but click event is being unset
          } );
          
      });  
  &lt;script&gt;
  $(document).ready(function(){});
  &lt;/script&gt;
  &lt;div id=&quot;btn&quot;&gt;
  
  &lt;/div&gt;
  </code></pre>