如何使用javascript使异步ajax半同步以避免竞争条件

how to make a async ajax semi sync to avoid race condition with javascript

本文关键字：竞争 条件 同步 javascript 何使用 异步 ajax      更新时间：2023-09-26

pre1：对我的问题的解释只是一个例子，而不是实际情况

pre2：所有ajax都是异步

pre3：我不想讨论ajax 的错误/错误处理

请想象一下，我有一个简单的页面，上面有一些水果的图片，比如一个苹果（当然）、一个橙子和一个42水果。

当用户点击其中一张图片时，水果的数量会增加或减少，这取决于图片的上半部分还是下半部分。

"用户愿望"通过ajax发送到服务器，并通过ajax响应-点击提交

为了避免类似"竞赛"的情况，当用户单击苹果时，苹果图像将被禁用，直到苹果ajax完成。（其他相同）

到目前为止，没有问题。

现在我让用户在文本框中输入水果名称，然后按"+"或"-"来增加或减少的数量

如果我在ajax准备好之前禁用输入，一切都很好，但用户在此期间无法输入新的水果名称（或不输入"+/-"）

在其他语言中，我会做的是：使用一个"命名互斥"，说"对不起，用户-苹果更新正在进行中；选择其他水果…"

但是如何使用javascript实现这一点呢？（不包括循环和阻塞）

当您在javascript中执行ajax时，您可以选择执行代码：

  1. 通话期间
  2. 通话完成后
  3. 一旦呼叫出错

因此，您想要做的是在进行调用时，禁用输入。呼叫完成后，您将重新启用这些框（假设呼叫成功）。AngularJS中的一个例子如下（它与所有其他语言非常相似）：

            $scope.myData.doClick = function(item, event) {
            //Disable the button here
            var responsePromise = $http.get("/angularjs-examples/json-test-data.jsp");
            responsePromise.success(function(data, status, headers, config) {
                //Re-enable the button here
            });
            responsePromise.error(function(data, status, headers, config) {
                alert("AJAX failed!");
            });
            }

下面是JQuery中的另一个例子，它可能对您更有用：

$("button").click(function(){
//Put your code to disable the button here
$.ajax({url: "demo_test.txt", success: function(result){
    //Put your code to re-enable the button here
}});
});

因此，在上面的代码中，您可以看到您可以选择在成功时调用给定的函数。因此，您可以禁用该按钮，然后在成功后重新启用它。

相关文章：