Question

pre1：我的问题的解释只是一个例子 - 而不是真实的情况

pre2：所有ajax都是asynch

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

请想象一下，我有一个简单的页面，上面有一些水果图片，可以说是一个苹果（当然），一个橘子和一个42fruit。

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

＆＃34;用户希望＆＃34;通过ajax发送到服务器，并通过ajax响应 - 单击

单击

为了避免类似于＆＃34; race＆＃34;，当用户点击苹果时，Apple -image被禁用，直到apple-ajax完成。（对其他人也一样）

到目前为止 - 没有概率。

现在我让用户在文本框中输入水果名称，然后按＆＃39; +＆＃39;或者＆＃39; - ＆＃39;增加或减少金额

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

我在其他语言中会做的是：使用名为mutex＆＃39;，说＆＃34;抱歉用户 - 苹果更新正在进行中;选择其他水果......＆＃34;

但是如何用javascript做到这一点？（没有循环和阻塞）

Answer 1

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

通话期间
通话结束后
一旦通话错误

所以你想要做的是在进行调用时，禁用输入。呼叫完成后，您将重新启用这些框（假设呼叫成功）。 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
}});
});

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

如何使用javascript

1 个答案: