Оповещение после $ .post показывает разные данные

Question

Посмотрите этот код:

<input type="hidden" id="finalvalue" value="2" />

<script>
    $.post("/increment_in_one", { param: 2 }, function (data) {
        alert( data ); // this shows: 3
        $("#finalvalue").val( data );
        alert( $("#finalvalue").val() ); // this shows 3
    });

    alert( $("#finalvalue").val() );   // this shows 2
</script>

Почему последнее предупреждение показывает 2?

Answer 1

Поскольку код работает не синхронно, как вы ожидаете от кодирования. Вызов $.post выполняется асинхронно "в фоновом режиме". Как только вы вызовете $.post, веб-браузер создаст новый поток, который выполняет всю задачу, и текущий поток сразу же продолжит работу с остатком функции, который является alert(), который отображает 2. В свою очередь, новый фоновый поток подключается к веб-серверу, запускает HTTP-запрос POST и, наконец, вызывает функцию обратного вызова. Это займет больше времени, чем первоначальный поток должен вызвать alert(). Вот почему вы видите разницу.

В этом конкретном примере кода вы должны были заметить, увидев, что 2 получает предупреждение до 3. Попробуйте добавить в предупреждение более значимую информацию, например,

alert('Inside $.post callback: ' + $("#finalvalue").val());

и

alert('At end of function: ' + $("#finalvalue").val());

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