title: Jquery disable button on a synchronous call
body: <p>I am trying to disable a button to prevent multiple click in a synchronous ajax call. My code is as follows.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8"&gt; 
    &lt;link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"&gt; &lt;!-- optional font --&gt;
    &lt;script  src="https://code.jquery.com/jquery-3.2.1.min.js"  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
           var test = false;
              $(document).on('click', '#test', function(e){
               console.log(test);
               if (test) {
                return;
               }
               test = true;
                  ajax_call();
    
              });
  
              function ajax_call() {
               $.ajax({
                      contentType: 'application/json;charset=utf-8',
                      type: 'POST',
                      url: 'https://validdomain',
                      dataType: 'json',
                      xhrFields: {
                        withCredentials: true
                      },
                      crossDomain: true,
                      data: JSON.stringify({'test' : 'test'}),
                      success: function(data, textStatus, jqXHR) {
                          console.log(data);test =false;
                          copypaste();
                          test = false;
                      },
                      error: function(jqXHR, textStatus, errorThrown) { 
                          console.log(textStatus);
                          
                          test = false;
                      },
                      async: false,
                  });
              }
  
              function copypaste() {
               var tempInput = document.createElement("textarea");
                  tempInput.setAttribute('id', 'copyid');
                  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
                  tempInput.value = 'Text Copied';
                  console.log(tempInput);
                  document.body.appendChild(tempInput);
                  tempInput.select();
                  var result = document.execCommand('copy');
                  document.body.removeChild(tempInput);
                  if (result) {
                      alert('copied');
                  }
                  else {
                   alert('not copied');
                  }
  
                  return result;
              }
  
          });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;input type="submit" id="test"/&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But my button is not disabled on the second click(I am getting alert twice.). If I make the ajax request as an asynchronous call then button is disabled. Is there any way that I can disable my button during a synchronous call?</p>
  
  <p>Thanks in advance!</p>