javascript - 如何验证 ajax 服务器计算的结果是否与用户的 UI 操作匹配？

Question

我有一个表单，用户可以通过选中复选框来选择一系列值。 有两个复选框列表，一个使用整数作为值，另一个使用字符串。

问题是我需要根据用户在复选框中选择的值向用户展示一些计算结果。 此计算可能非常慢，从 2 到 20 秒不等。

目前，计算值的 ajax 请求在用户选中任何复选框时执行。但这会导致对他们单击的每个复选框进行请求。每个请求返回的计算结果有时会以错误的顺序到达，这意味着最慢/最后到达的响应是呈现给用户的响应。

我似乎不必验证对用户所选值的响应，以便仅在与所选复选框匹配时才显示结果。 我认为哈希值是解决这个问题的最佳方法。但我在使用 C# 和 javascript 实现找到合适的哈希函数时遇到了一些麻烦。

我知道我可以在返回结果时返回用户操作，但我仍然需要比较所有值，并且值的数量可能非常大。

最优我想在服务器上生成所选值的哈希值，然后在返回结果时在客户端生成当前所选值的哈希值，然后比较两者以指示结果是否与选定的值。

类似这样的事情:

$.ajax({
  type: 'POST',
  url: '/Backend/GetCalculatedResult',
  data: { CheckedIntegers: checkedIntegers, CheckedStrings: checkedStrings },
  success: function(data) {
        if(ResultMatchesSelection(data.SelectionHash)) {
            DisplayResult(data.Result);
        }
  },
  dataType: "json",
});

function ResultMatchesSelection(hash)
{
    var selectionHash = .. generate hash from selected items;
    return hash == selectionHash;
}

我已部分修复了此问题，方法是在最后一次用户操作后 1 秒执行 ajax 请求。因此，如果用户依次选中 5 个复选框，每个复选框之间的间隔不到一秒，则请求将仅执行一次，而不是 5 次。

我真的很想要两者的结合。

您知道如何在服务器端和客户端上进行此哈希处理吗？ 或者，如果您知道如何以其他方式解决此问题，请说出您的想法:)

Answer 1

您可以在 jQuery 中声明一个全局变量(如 requestNo)，并在每次 ajax 调用时发送该变量值(增量 每个 ajax 请求的 requestNo 值)。

当您返回ajax响应时，返回您通过ajax请求收到的requestNo值，而不是散列值。在客户端检查ajax响应中的requestNo是否与当前requestNo值相同，如果相同则显示结果。