jquery - iPad 上的 JQuery 出现 Ajax 错误

Question

我们的一款生产网络应用程序出现问题，但仅限于 iPad/iOS8。

基本上，在我们的应用程序中，用户通过点击代表不同产品的图像将产品添加到购物车中。当图像被点击时，产品被“选择”并进行 ajax 异步调用；此调用会更新我们的购物车。每个异步调用持续大约 5-10 秒。

当用户连续点击多次时会出现问题(但仅在 iPad 上，而不是在 Chrome 桌面上等)。然后，第 n 个 ajax 调用失败并显示“错误 0”。 注意:当一个 ajax 调用已经在执行时，我们无法阻止第二个 ajax 调用(正如一些答案所建议的那样)，因为购物车无法正确更新。

我已经在 jsFiddle 示例中跟踪了此行为，您可以在此处找到:

http://jsfiddle.net/oc1ktv6u/30/

function updateCart()
{
var data = {
        json: $.toJSON({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: Math.round(Math.random()*12)
}

$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:function(response)
    {
       $(".target").append("+");
    },
    error:function(xhr, ajaxOptions, thrownError) 
    {
        alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]");
    }
});

}

我的主要问题是:

• 为什么会发生这种情况(显然，为什么只在 iPad/Safari 上发生)？

Answer 1

正如其他答案所提到的，您应该有一个队列来处理这些请求，并确保它们按照创建的顺序进行处理:

var active = false;
var requests = [];

var updateCart = function (data) {
if(active) {
    requests.push(data);
} else {
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        beforeSend: function() {
            active = true;
            //show loading on the cart symbol or something to tell the user there is a process going on, UX goodness
        },
        success : function() {
            active = false;
            if(requests.length > 0) {
                next = requests.shift();
                updateCart(next);
            }
        }
    });
};

这个网站似乎可以深入了解一次可用的事件连接数量，您可以在 iPad 上进行测试 http://www.browserscope.org/?category=network

我自己运行了它，它提到了 17 个最大连接，但我也很好奇您在这些 iPad 上使用的网络，如果速度较慢(例如在 3G 或 Edge 上)，那么这些连接可以很快备份。我正在 Wifi 上测试我的 iPad，无法在 Fiddle 上重现您的错误。希望这至少有助于诊断问题。