更新用戶輸入和異步服務器端API調用的輸出

Question

我正在開發一個Web應用程序。

在某個時候，我有一個輸入字段，用戶可以在其中輸入數字。 在它旁邊，我想顯示該數字的兩倍作為輸出。 當然，可以通過以下方式（jQuery語法）輕松地使用Javascript在客戶端進行此操作：

$(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
   });
});