提交ajax请求时，如何“搁置”原始请求?在满足条件之前暂时使用

感谢@Loading和@guest271314为我指出正确的方向，帮助我把事情弄清楚。我把我是如何完成它的贴在下面——也许它会对其他人有所帮助。当然，如果有人想参与我的实施，请参与。

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCaptcha&render=explicit&hl=en" async defer></script>
<script>
    var captchaValidated = null;
    var currentRequests = [];
    var captchaPrompted = false;
    var captchaReady = false;
    var resetCaptcha = false;
    function onloadCaptcha() {
        captchaReady = true;
        captcha = grecaptcha.render('recaptcha', {
            'sitekey': '<yoursitekey>',
            'callback': verifyCaptcha,
            'expired-callback': invalidateCaptcha,
            'type': 'audio image'
        });
    }
    var deferredCaptcha = null;
    var promiseCaptcha = null;
    var captcha = null;
    function openRecaptcha() {
        if (!captchaReady) {
            setTimeout(openRecaptcha, 50);
        }
        if (captchaPrompted) {
            return;
        }
        captchaPrompted = true;
        var captchaTimer = setInterval(function () {
            if (captchaValidated != null) {
                if (captchaValidated) {
                    deferredCaptcha.resolve();
                } else {
                    deferredCaptcha.reject();
                    captchaValidated = null;
                }
            }
        }, 100);
        if (resetCaptcha) {
            captcha.reset();
        }
        deferredCaptcha = $.Deferred();
        promiseCaptcha = deferredCaptcha.promise();
        promiseCaptcha.done(function () {
            //captcha was successful
            clearInterval(captchaTimer);
            //process the queue if there's items to go through
            if (currentRequests.length > 0) {
                for (var i = 0; i < currentRequests.length; i++) {
                    //re-request the item
                    $.ajax(currentRequests[i]);
                }
            }
        });
        promiseCaptcha.fail(function () {
            //captcha failed
            clearInterval(captchaTimer);
            currentRequests = []; //clear the queue
        });
        $("#recaptchaModal").modal('show');
    }
    function verifyCaptcha() {
        resetCaptcha = true;
        var response = $("#g-recaptcha-response").val();
        var encodedResponse;
        // confirm its validity at the server end 
        $.ajax({
            headers: headers,
            cache: false,
            url: "/ValidateCaptcha",
            type: 'POST',
            contentType: 'application/json',
            success: function (data) {
                captchaValidated = data;
                if (!data) {
                    captchaPrompted = false;
                }
            },
            error: function (raw, textStatus, errorThrown) { captchaValidated = false; captchaPrompted = false; alert("WTF Validate ReCaptcha Error?!: " + JSON.stringify(raw)); },
            data: JSON.stringify({ "encodedResponse": response })
        });
    }
    function invalidateCaptcha(){
        deferredCaptcha.reject();
        captchaValidated = null;
        resetCaptcha = true;
    }
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (settings.url == '/ValidateCaptcha' || captchaValidated) {
                // we're validating the captcha server side now or it's already been validated - let it through
            } else {
                if (typeof settings.nested === 'undefined'){
                    settings.nested = true; //this flag is to determine whether it's already in the queue
                    currentRequests.push(settings); //add the request to the queue to be resubmitted
                    //prompt them with the captcha
                    openRecaptcha();
                }
                return false; // cancel this request
            }
        }
    });
</script>

在$.ajaxPrefilter()用.then()链接openCaptcha呼叫verifyCaptcha

if (captchaValidated == null){
                openRecaptcha().then(verifyCaptcha);
            }

在verifyCaptcha使用.is()带参数"*"检查document中是否存在一个元素

if (grecaptcha.is("*")) {

在openRecaptcha()，如果grecaptcha.render不返回异步结果返回jQuery承诺对象使用.promise();else链到grecaptcha.render和$("#recaptchaModal").modal('show');使用$.when()

return $("#recaptchaModal").modal('show').promise()

或

return $.when(grecaptcha.render(/* parameters */)
       , $("#recaptchaModal").modal('show').promise())

像这样?(伪代码)

verified = false;
$('#myButton').click(function(){
  if (!verified) verify_by_captcha();
  if (verified){
    $.ajax(function(){
      type: 'post',
       url: 'path/to/ajax.php',
      data: your_data
    })
    .done(function(recd){
      //ajax completed, do what you need to do next
      alert(recd);
    });
  }
});//end myButton.click