Jquery $ .post () переменная область видимости

Question

У меня нет большого опыта работы с JavaScript, и у меня проблемы с областью видимости переменной и jquery. У меня есть следующая структура:

function pass_variables()
{
    username = "efcjoe"
    response = post_variables(username)
    alert(response)
}

function post_variables(username)
{
    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        function(data)
        {
            valid = (data != 0) ? true : false

            // OPTION 1: If I put return here...
            return valid; // ... the alert box in pass_variables says "undefined"
        },
        "text"
    );

    // OPTION 2: If I put return here...
    return valid; // ... The alert box does not pop up, and Safari debug gives
                  //     me the error: "Can't find variable: valid"
}

Я что-то там упускаю? Я думаю, что valid должна быть глобальной переменной, и поэтому вариант 2 должен работать нормально. Я действительно не уверен насчет варианта 1.

Кто-нибудь может дать мне какой-нибудь совет о том, как лучше всего это работает?

Большое спасибо.

Answer 1

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

Лучшее, что вы можете сделать, это на самом деле передать функцию, запускаемую после завершения запроса ajax. Это также устраняет необходимость в глобальных переменных, которые не одобряются, так как другие плагины, сценарий могут изменить свое состояние и оставить ваш сценарий открытым для ошибок, недостатков и т. Д.

* 1005 например *

function foobar(){

   //call function to do post request and also pass a function to run
   //when post has returned
   runPostRequest( callbackFn );

}

function runPostRequest(callback){

    $.post( '/foo', callback );

}

function callbackFn( data ){

   console.log('post request complete');

}

Answer 2

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

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

Я бы реорганизовал ваш код таким образом, без использования глобальных переменных:

function post_variables(username){
  $.post('/path/to/url/',{
    'username': username,
  },
  function(data){
    var valid = data != 0;

    // OPTION 3: Work in the callback function
    alert(username);
    alert(valid);

    // OPTION 4: Pass the values and work on another function
    otherFunction(username, valid);
  },"text");
}

function otherFunction(username, isValid){
  //...
}

Answer 3

Да, ваша проблема в том, что вы не понимаете некоторые проблемы порядка операций здесь. Функция, которую вы передаете $.post, является callback ; он запускается позже, значительно после окончания post_variables(). post_variables() само по себе не ждет завершения $.post, поэтому valid не существует, когда вы пытаетесь его использовать.

Answer 4

Помните, что AJAX является асинхронным. return valid; выполняется немедленно после установки $.post(), но до того, как сообщение завершено (и, следовательно, до определения valid). Что вы, вероятно, хотите сделать, это:

function post_variables(username)
{
    var username = "efcjoe";

    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        function(data)
        {
            var valid = (data != 0) ? true : false
            alert(valid);
        },
        "text"
    );
}

И обратите внимание, что для этого больше не нужны глобальные переменные, а переменные области действия, которые объявлены с использованием var.

Answer 5

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

function pass_variables()
{
    username = "efcjoe"
    response = post_variables(username);
}

function post_variables(username)
{
    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        receivedData,
        "text"
    );
}

function receivedData(data)
{
    valid = (data != 0) ? true : false;
    alert(valid)
}