jQuery: Missing 'timeout' error, error callback does not fire

Question

When doing the registration, I want to check immediately if the email address is already associated with an account. Therefore I use the jQuery Validation Plugin and send a synchronous ajax request to the server. That works fine.
To test what happens in case of a timeout, I have chosen a timeout of 5ms for the ajax request. On the server side (php-file) programme execution is delayed by 5 seconds using sleep(5).
But instead of getting a timeout error after 5ms, the success callback returns the correct data from the server after 5 seconds.
So the ajax timeout parameter doesn't seem to work. This is my code:

    $.validator.addMethod('ist_ProvEmail_noch_frei',function(value, element) {
    var bValidEmail;

    var jqXHR = $.ajax({
        url:  'ajax/IstProvEmailVergeben.php',
        data: {
            email:  value
        },
        success : function(data, textStatus, jqXHR) { 
            console.log("success1: " + textStatus);
      // some code
        },
        error : function(jqXHR, textStatus, errorThrown) {  
            console.log("textStatus1: " + textStatus + ", type: " + typeof textStatus );
      // some code
            bValidEmail = true; // to prevent jQueryValidation from showing an error message
        },

        method: "POST",
        async:  false,  
        timeout: 5,         // 5 ms 
        dataType: 'json'
    });

    console.log("jqXHR.responseText: " + jqXHR.responseText);
    return bValidEmail;
}, 'This email address is already associated with an account.');

I have checked the code several times with other articles but can't find out what is wrong.
Does anybody have an idea?

Henry

Answer 1

async: false is your problem. See here with a asynchronous call:

$.ajax({
    url: "/ajax_json_echo/",
    type: "GET",
    dataType: "json",
    timeout: 5,
    success: function(response) { alert("success"); },
    error: function(xmlhttprequest, textstatus, message) {
        if(textstatus==="timeout") {
            alert("got timeout");
        } else {
            alert(textstatus);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

And here with async: false:

$.ajax({
    url: "/ajax_json_echo/",
    type: "GET",
    dataType: "json",
    timeout: 5,
    async:  false,
    success: function(response) { alert("success"); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            console.log(t);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The reason: during a synchronous ajax request, the browser is blocked and no javascript can be executed while the browser is blocked.

Edit: The workaround for using timeout and synchronous request: https://stackoverflow.com/a/36008375/1670090

$.ajax({
    url : '/ajax_json_echo/',
    type: 'GET',
    timeout: 5,
    dataType : 'json',
    success : function(data, textStatus) {
        $.ajax({
            url : '/ajax_json_echo/',
            async: false,
            type: 'GET',
            dataType : 'json',
            success: function(response) { alert("success"); },
            error: function(xmlhttprequest, textstatus, message) {
                if(textstatus==="timeout") {
                    alert("got timeout");
                } else {
                    alert(textstatus);
                }
            }
        });
    },
    error : function(jqhdr, textstatus,
                     errorThrown) {
        if(textstatus==="timeout") {
            alert("got timeout");
        } else {
            alert(textstatus);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>