Асинхронный скрипт JQuery

Question

Я хочу сделать следующий маленький сценарий / вещь. Есть форма регистрации, и я хочу, чтобы jquery проверил, соответствуют ли введенные данные (например, имя пользователя и / или адрес электронной почты) правилам проверки CakePHP, и вернет эту информацию пользователю в симпатичном окне сообщения. поэтому я строю следующее (упрощенно):

$("input#UserDisplayName").keyup(function() {        
    var value = $(this).val();
    var status = validateAgainstCakeModel('display_name', value);
    var box = $("#DisplayNameMessage");

    if ( status == "true" ) {
        // show box with a message and so on ...
        var message = "This Name is available.";
        updateMessageBox( 0, box, message );
    } else {
        var message = " asdhasjkdhasd";
        updateMessageBox( 0, box, message );
    }
}

метод проверки:

function validateAndUpdateMessageBox( field , value ) {
    // prepare & send ajax request
    $.ajax({
        url: "register",
        type: "POST",
        timeout: 5000,
        data: { action: "validate", field: field, value: value },
        success: function( result ) {
          response = result;
        }
    });

    return response;
}

Итак, проблема в асинхронности всего этого. в то время, когда ответ будет возвращен, еще не будет никаких данных, и поэтому функция вернет "undefined".

да, я знаю параметр "async: false", но это блокирует браузер на секунду (или больше). Есть ли другое решение, чтобы кодировать его так и НЕ блокировать браузер?

спасибо за ответы.

Answer 1

Укажите код для последующего выполнения в качестве обратного вызова.

$("input#UserDisplayName").keyup(function() {        
    var value = $(this).val();
    validateAgainstCakeModel('display_name', value, function(status) {
        var box = $("#DisplayNameMessage");

        if ( status == "true" ) {
            // show box with a message and so on ...
            var message = "This Name is available.";
            updateMessageBox( 0, box, message );
        } else {
            var message = " asdhasjkdhasd";
           updateMessageBox( 0, box, message );
        }
    });
}

function validateAndUpdateMessageBox( field , value, callback ) {
    // prepare & send ajax request
    $.ajax({
        url: "register",
        type: "POST",
        timeout: 5000,
        data: { action: "validate", field: field, value: value },
        success: function( result ) {
          callback.call(this, result );
        }
    });
}

Answer 2

после пересмотра моего ответа я немного изменил вашу структуру, это может быть более полезно, если вы не хотите использовать callback

$("input#UserDisplayName").keyup(function() {        

var value = $(this).val();    
var box = $("#DisplayNameMessage");

$.ajax({
    url: "register",
    type: "POST",
    timeout: 5000,
    data: { action: "validate", field: 'display_name', value: value },
    success: function( result ) {
       if ( status == true ) {
            // show box with a message and so on ...
            var message = "This Name is available.";
            updateMessageBox( 0, box, message );
        } else {
            var message = " asdhasjkdhasd";
            updateMessageBox( 0, box, message );
        }            
    }
});

}