jquery - jQuery AJAX 阻止用户更改页面

Question

我在each声明中有多个 ajax：

$('.product').each(function () {
      var product = $(this).attr('data-product');
      $.ajax({
          url:"/ajax/product",
          data:"lookup=" + product,
          success: function () { /* callback */ }
      });
});

目前有 5 个产品在each循环中。

submit我的问题是，在所有这些 ajax 查找完成之前，用户无法按下表单按钮；由于调用外部 API，ajax 调用每次都需要一些时间来处理。更具体地说，他们可以按下submit按钮，但在所有 ajax 函数似乎都完成之前它不会做任何事情。

如果用户想提交表单，如何使 ajax 调用不稳定/不等待回复？

Answer 1

您应该使用setTimeout()which 将使调用在不同的线程上发生。

$('.product').each(function() {
      setTimeout(function () {
         var product = $(this).attr('data-product');
         $.ajax({
            url:"/ajax/product",
            data:"lookup=" + product,
            success: function () { /* callback */ }
         });
    });
});

jQuery.deferred允许异步执行代码的类似功能。

Answer 2

您可以将回调传递给您的函数，以便在数据准备好时对其进行处理：

myFunction: function(callback) {
    $.get(myUrl, function(data) {
        callback( data );
    });
}

或者您可以尝试这样做：

$('.product').each(function () {
      var product = $(this).attr('data-product');
      $.ajax({
          url:"/ajax/product",
          data:"lookup=" + product,
          async:true,
          success: function () { /* callback */ }
      });
});

Answer 3

您的用户可以submit随时按下按钮，它会做它应该做的事情 - 提交表单内的所有内容。

您真正需要做的是在启动 AJAX 请求之前/之后填充包含提交按钮的表单，而不是在回调内部。

这样用户可以submit随时点击按钮。