jQuery: Fehlender "Timeout" -Fehler, Fehler-Callback löst nicht aus

Question

Bei der Registrierung möchte ich sofort überprüfen, ob die E-Mail-Adresse bereits mit einem Konto verknüpft ist. Daher verwende ich das jQuery Validation Plugin und sende eine synchrone Ajax Anfrage an den Server. Das funktioniert gut.
Um zu testen, was im Falle eines Timeouts passiert, habe ich einen Timeout von 5ms für die Ajax-Anfrage gewählt. Auf der Serverseite (php-Datei) wird die Programmausführung um 5 Sekunden verzögert, indem sleep (5) verwendet wird.
Aber anstatt einen Zeitüberschreitungsfehler nach 5 ms zu erhalten, gibt der Erfolgsrückruf die korrekten Daten vom Server nach 5 Sekunden zurück.
Also der Ajax Timeout-Parameter scheint nicht zu funktionieren. Dies ist mein 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.'); 

ich den Code mehrmals mit anderen Artikeln überprüft haben, kann aber nicht herausfinden, was falsch ist.
Hat jemand eine Idee?

Henry

Answer 1

async: false ist Ihr Problem. Siehe hier mit einem asynchronen Aufruf:

$.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>

Und hier mit 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>

Der Grund: während einer synchronen Ajax-Anforderung, der Browser ist blockiert und es kann kein Javascript ausgeführt werden w hile der Browser ist blockiert.

Edit: Die Abhilfe für Timeout und synchrone Anfrage mit: 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>