javascript - jQuery Ajax 竞争条件？

Question

我有下面的 JavaScript 代码，它循环访问页面上的文本字段列表。它将文本字段中的文本作为价格，通过 AJAX GET 将其发送到服务器，然后从服务器返回解析后的双倍价格。如果任何返回的价格低于现有价格，则不应提交该表单。

问题是表单在所有 AJAX 请求完成之前提交，因为 Ajax 调用的非阻塞即时响应性质。我需要设置一个 wait() 函数(或当所有 Ajax 方法完成时的回调)但不知道如何使用 jQuery 来实现。

有什么建议吗？

// .submitForm is a simple button type="button", not type="submit"
$(".submitForm").click(function(e){
   var submittable = validatePrices();
   if (submittable) {
     $("#myForm").submit();
   }
});

function validatePrices() {
    var submittable = true; 

    $(".productPrice").each(function(){
        var $el = $(this);

        $.ajax({
            type: "POST",
            url: "/get_price.jsp", 
            async: false,
            dataType: "html",
            data: "price=" + $el.val(), 
            success: function(data)
            {                  
               var price = new Number(data.split("|")[1]);
               var minPrice = new Number($el.data("min-price")); 
               if (price < minPrice) 
               {
                  $el.addClass("error");
                  $(".dynamicMessage").show().addClass("error").append("<p>ERROR</p>");
                  submittable = false;
               }
            }
        });
        return submittable;
    });
}

Answer 1

您已经在使用同步 AJAX(这对您的用户体验来说是一个非常糟糕的主意)，所以这不是问题所在。问题是您需要取消“提交”处理程序中的默认操作:

$(".submitForm").click(function(e){
   var submittable = validatePrices();
   e.preventDefault(); // this line
   if (submittable) {
     $("#myForm").submit();
   }
 });

为每个单独的字段使用同步 HTTP 请求返回到您的服务器将使您的站点非常慢。无论如何，当您提交表单时，您将不得不再次检查服务器上的参数，因此最好只检查然后返回错误。

编辑 — 既然情况更清楚了，我认为继续进行的方法是完全停止执行 AJAX 验证检查。为什么？好吧，即使您执行了这些测试，您仍然需要在实际提交表单时进行基本相同的有效性测试。您不能像在任何其他表单验证场景中那样依赖实际运行的 JavaScript 验证代码。无论如何，如果您在提交表单时进行验证，它会节省一堆 HTTP 请求，同时完成所有这些请求。