Обновление вывода из пользовательского ввода и асинхронных вызовов API на стороне сервера

Question

Я разрабатываю веб-приложение.

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

$(document).on("change", "#input", function () {
   var x = $("#input").val();
   var y = 2 * x;
   $("#output").val(y);
});

Однако, по разным причинам, связанным с реальным приложением, мне нужно , чтобы выполнить вычисления на стороне сервера и показать результат на стороне клиента после вызова моего API. Мой наивный подход состоял в том, чтобы реализовать его следующим образом (синтаксис jQuery):

$(document).on("change", "#input", function () {
   $("#output").val("Currently computing result");
   $.ajax({ ... }).done(function (result) {
     $("#ouput").val(result);
   });
});

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

Я ожидаю, что это типичная ситуация. Как я могу решить это? Должен ли я использовать интерфейсную среду, такую ​​как Vue.js (несмотря на то, что я все еще хочу разместить вычисления на стороне сервера)? Фронтальные структуры вообще справляются с этой трудностью? Есть ли простой способ справиться с этим с помощью простого Javascript? Спасибо!

Answer 1

Вы можете установить загрузчик для предотвращения действий пользователя (вызовов ajax), пока не будет получен ответ на текущий вызов ajax:

$(document).on("change", "#input", function () {
   // Show loader
   $("#output").val("Currently computing result");
   $.ajax({ ... }).done(function (result) {
     $("#ouput").val(result);
     // Hide loader
   });
});