title: Javascript Bind and Unbind function call
body: <p>I have this following code in in jquery.</p>
  
  <pre><code>$(document).ready(function () {
      console.log('Hello');
  
      var uploadButton = $('#upload-button');
  
      uploadButton.on('click', function () {
          uploadButton.unbind('click');
          progressBar();
          uploadButton.bind('click');
      });
  
  });
  
  function progressBar(){
  
      var element = document.getElementById('bar');
      var width = 1;
      var id = setInterval(addFrame, 25);
  
      function addFrame() {
          if(width == 100){
              clearInterval(id);
  
              element.style.width = 0;
              return true;
          }
  
          width += 1;
          element.style.width = width + '%';
      }
  
  }
  </code></pre>
  
  <p>What I'm trying to do is to call a function for a progress bat when an HTML <code>button</code> item is being pressed, but also try to disable anymore calls until the current call is finished. By initial idea was to unbind the <code>click</code> event when it is being pressed, execute the function, and then bind <code>click</code> again to the same element, but so far, the only thing I get is only one call of <code>progressBar</code> and after that, the <code>button</code> remains unbound for <code>click</code>.<br>
  What am I doing wrong?<br>
  Thank you.</p>