Не могу переменную доступа внутри jQuery $.post

Question

Я просмотрел много постов по этому поводу, но не нашел никакого решения, работающего на меня - вычистил код:

  $('#form-new').submit(function(e){
    e.preventDefault();

    $curForm = $(this);
    $textbox = $( '.new-box' ,this);

    window.tmp_input_ok = false;

    var wasError = false;
    if( $.trim($textbox.val()) == "" ){  
      wasError = true; 
    }    

    if( wasError ){
      //possible message
    } else{

      var jqxhr = $.post(
        $(this).attr('action'),
        $(this).serialize(),
        function(data, textStatus, jqXHR){

          if( data=="200" ){
            console.log('post OK'); //this shows in console!
            window.tmp_input_ok = true;  
          } else{
            console.log('not OK');       
          } 

        }
      ).fail(function() {
        console.log('POST fail)');
      });    

    }

    //however, window.tmp_input_ok is false here so the textbox does not empty:
    if(window.tmp_input_ok == true) $textbox.val(''); 
      else console.log('input not ok :('); //and this is outputted to console

  }); 

Первоначально, был просто var tmp_input_ok = false инициализация, а затем работа с tmp_input_ok переменная, но она не работала, поэтому я попробовал глобальное окно... тоже не работает... Я начинаю отчаяться.

Answer 1

Ваш if Оператор выполняется до завершения вызова.

$.post это асинхронный вызов, а остальная часть кода продолжается, пока пост обрабатывается

Вы уже используете .fail(), можете добавить .always() если вы хотите выполнить свой if заявление всегда по завершении или добавить его в свой .success() если вы хотите проверить это только при успешном вызове, аналогично следующему:

if (wasError) {
    //possible message
} else {
    var jqxhr = $.post($(this).attr('action'), $(this).serialize(), function (data, textStatus, jqXHR) {
        if (data == "200") {
            console.log('post OK'); //this shows in console!
            window.tmp_input_ok = true;
        } else {
            console.log('not OK');
        }

        // either add it here if you only want to process it on success
        if (window.tmp_input_ok == true) $textbox.val('');
        else console.log('input not ok :(');
    }).fail(function () {
        console.log('POST fail)');
    }).always(function(){ // or add it here if you always wan to execute on completion regardless of fail or success
        if (window.tmp_input_ok == true) $textbox.val('');
        else console.log('input not ok :(');
    });
}

Answer 2

Причина, по которой ваш XHR-запрос имеет обратный вызов onSuccess, заключается в том, что вызов асинхронный.

Возьмем, к примеру, этот простой фрагмент кода:

$.get(
    '/foo',
    function(){
        alert("data received");
    }
)

alert ("End of script reached");

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

Часто вы будете видеть предупреждение "Конец сценария достигнут" перед предупреждением "данные получены" просто потому, что полный XHR-запрос займет более 100 миллисекунд, а чтение этих нескольких строк займет часть этого.

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