更新用户输入和异步服务器端API调用的输出

Question

我正在开发一个Web应用程序。

在某些时候，我有一个输入字段，用户可以输入一个数字。在它旁边，我想将输出显示为该数字的两倍。当然，这可以通过以下方式使用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
   });
});