title: When submitting an ajax request, how can you "put the original request on hold" temporarily until a condition is met?
body: <p>I am wanting to implement a recaptcha process that captures all ajax requests before they go through - the desired process would be as follows:</p>
  
  <ol>
  <li>User completes an action which is going to cause an ajax request of some sort.</li>
  <li>If the user has already completed the recaptcha process, the ajax request proceeds without further delay</li>
  <li>If the user has not completed the recaptcha process, put the ajax request "on hold" temporarily until the recaptcha process is completed, then continue the ajax request.</li>
  </ol>
  
  <p>I have got things to a state where I intercept the call, however I don't know how to put it on hold temporarily. Here's the relevant code:</p>
  
  <pre><code>&lt;script&gt;
      var captchaValidated = null;
  
      var currentRequests = [];
      $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
          if (options.url != "/ValidateCaptcha") {
              if (captchaValidated == null || captchaValidated == false) {
                  if (captchaValidated == null){
                      openRecaptcha();
                  } else {
                      verifyCaptcha(); //see async question in method
                  }
                  if (!captchaValidated) {
                      jqXHR.abort();
                  } else {
                      //let the original request proceed now - but how?!
                  }
              }
          }
      });
  
      function verifyCaptcha() {
          var grecaptcha = $("g-recaptcha-response");
          var encodedResponse;
          if (grecaptcha != null) {
              encodedResponse = grecaptcha.val();
              $.ajax({
                  async: false, //set to false so that the calling method completes rather than async - what do you think?
                  headers: headers,
                  cache: false,
                  url: "/ValidateCaptcha",
                  type: 'POST',
              contentType: 'application/json',
              success: function (data) {
                  //parse the data - did we get back true?
                  captchaValidated = data;
              },
              error: function (raw, textStatus, errorThrown) { captchaValidated = null; alert("Validate ReCaptcha Error: " + JSON.stringify(raw)); },
              data: JSON.stringify({ "encodedResponse": encodedResponse })
              });
          }
      }
  
      function invalidateCaptcha(){
          captchaValidated = null;
      }
      function openRecaptcha() {
          grecaptcha.render('recaptcha', {
              'sitekey': "thekey",
              'callback': verifyCaptcha,
              'expired-callback': invalidateCaptcha,
              'type': 'audio image'
          });
          $("#recaptchaModal").modal('show');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any suggestions of how to proceed would be appreciated, thanks in advance!</p>