如何根据用户输入解析JQuery Promise

Question

I've got this code whose result should be returned as either resolved or rejected promise.

var runChecks = function(hasClickId, maxClicksModeIsNotOff) {
    var dfd = $.Deferred();

    clickIdCheckPassed = hasClickId; // equals false
    maxClicksCheckPassed = maxClicksModeIsNotOff; // equals false

    if (!clickIdCheckPassed) {
        clickIdCheckPassed = runClickIdCheck();
    }

    if (!maxClicksCheckPassed) {
        maxClicksCheckPassed = runMaxClicksCheck();
    }

    if (maxClicksCheckPassed && clickIdCheckPassed) {
        dfd.resolve('Resolved');
    } else {
        dfd.reject('rejected');
    }

    return dfd.promise();
};

Functions runClickIdCheck() and runMaxClicksCheck() collect user input and based on it, return either true or false . If both resulting values are true , I should resolve the promise, otherwise it should be rejected - hence the conditional:

if (maxClicksCheckPassed && clickIdCheckPassed) {
    dfd.resolve('Resolved');
} else {
    dfd.reject('Rejected');
}

However, the problem is that the code does not wait for the user input and each time evaluates the promise as 'rejected' even before the user gave any input.

For reference, this is how runClickIdCheck function looks like:

var runClickIdCheck = function() {
    bootbox.confirm('Are you sure?', function(result) {
        if (result) {
            return true;
        }
    });
    return false;
};

How I can make this code behave as expected, so that I evaluate the promise to 'resolve' only when the functions dependent on user input both return true?

Edit:

The expected UI behaviour is that the form should be submitted only if the user confirms the dialogue twice:

$form.submit(function(e) {
    e.preventDefault();
    $.when(runChecks(hasClickId, maxClicksModeIsNotOff)).then(
        function(status) {
            $form.submit()
        },
        function(status) {
            return false;
        }
    );
}

This is why I thought the promise inteface would do the job. The promise shoudl be resolved if runClickIdCheck() and runMaxClicksCheck() evaluate to true .

Answer 1

While it's possible to make this work with $.Deferred() , I doubt that it is worth it.

I have implemented a promise-based solution prior to writing the following code, and turned out to be a lot longer and a lot less clear than just using the callback-based approach that bootbox offers.

Keep it simple.

$("#form").submit(function (e) {
    var self = this;

    e.preventDefault();

    bootbox.confirm('Question 1', function (confirmed1) {
        if (!confirmed1) return;

        bootbox.confirm('Question 2', function (confirmed2) {
            if (!confirmed2) return;

            $.post(self.action, $(self).serialize()).done(function (data) {
                // Ajax post has finished successfully
            });
        });
    });
});