Как я могу вернуть полученное AJAX-значение родительской функции текущей функции в JavaScript?

Question

У меня есть следующий код JavaScript (и jQuery):

function checkEmail(email) {
    if (email.length) {
        $.getJSON('ajax/validate', {email: email}, function(data){
            if (data == false) {
                // stuff
            }
            return data;
        })
    }
}

Я хочу, чтобы анонимная функция была return data для родительской функции, checkEmail(). Я пытался сделать что-то вроде этого:

function checkEmail(email) {
    if (email.length) {
        var ret = null;
        $.getJSON('ajax/validate', {email: email}, function(data){
            if (data == false) {
                // stuff
            }
            ret = data;
        })
        return ret;
    }
}

Но, конечно, это не сработает, поскольку вызов $.getJSON() является асинхронным, поэтому он будет return ret до завершения запроса GET.

Есть мысли здесь?

Спасибо!

Answer 1

Как правило, лучший способ справиться с этим типом проблемы - использовать некоторую форму функции обратного вызова. На самом деле, это действительно единственное практически осуществимое решение - единственный другой вариант - это кодирование ваших собственных расширений для браузера, и это немного (если вы действительно не любите биться головой о стену). На этих досках есть довольно много параллельных вопросов: вы можете попытаться найти некоторые, многие из них очень хороши.

Изменение вашего кода:

function checkEmail(email) {
    /*
        original parts of the function here!
    */

    if (email.length) {
        $.getJSON('ajax/validate', {email: email}, function(data){
            if (data == false) {
                // stuff
            }
            checkEmailResponse( data );
        })
    }
}

function checkEmailResponse( data )
{
    // do something with the data.
}

Answer 2

Вы также должны использовать обратный вызов, потому что вызов асинхронный, и, следовательно, проектируйте весь исходный код JavaScript вокруг этой идеи (как отмечали другие).

Если вам действительно нужно получить его как возвращаемое значение, вам нужно отключить асинхронный вызов, но это совсем не рекомендуется, потому что он блокирует страницу до тех пор, пока ответ не будет получен.

function checkEmail(email, callback) {
    if (email.length) 
    return $.ajax({
      data:  {email: email},
      url: 'ajax/validate',
      async: false
     }).responseText; // only the raw response text of the XMLHttpRequest
    }
}

Answer 3

Вам просто нужно изменить способ решения проблемы. Вы знаете, что то, что у вас есть выше, не будет работать, поэтому вы не можете думать с точки зрения «вызова функции и обработки ее возвращаемого значения».

Вам нужно будет переключиться на что-то вроде предложения Тоби о CPS или, в зависимости от того, что вызывает эту функцию, обрабатывать ее с помощью пользовательских событий.

Answer 4

Вы можете иметь родительский функциональный блок, пока там что-то не будет. А чтобы уменьшить интенсивность использования процессора, вы можете использовать тайм-аут некоторого вида.

function checkEmail(email) {
if (email.length) {
    var ret = null;
    $.getJSON('ajax/validate', {email: email}, function(data){
        if (data == false) {
            // stuff
        }
        ret = data;
    }) 
   while(ret == null){

   }
   return ret;
}

}

Надеюсь, это поможет.