jQuery addClass() 不在 jQuery.ajax() 之前运行

Question

我试图有一个按钮，loading在发出一系列 ajax 请求之前，onclick 会将一个类（将光标设置为“等待”）应用于主体。

代码是：

$('#addSelected').click(function(){
    $('body').addClass('loading');

    var products = $(':checkbox[id^=add_]:checked');
    products.each(function(){
        var prodID = $(this).attr('id').replace('add_', '');
        var qty = $('#qty_' + prodID).val();
        if($('#prep_' + prodID).val())
        {
            prodID += ':' + $('#prep_' + prodID).val();
        }
        // Have to use .ajax rather than .get so we can use async:false, otherwise
        // product adds happen in parallel, causing data to be lost. 
        $.ajax({
            url: '<?=base_url()?>basket/update/' + prodID + '/' + qty,
            async: false,
            beforeSend: function(){
                $('body').addClass('loading');
            }
        });
    });
});

我试过做

$('body').addClass('loading');

两者都在请求之前，以及作为 beforeSend 回调，但没有区别。

在 firebug 中，我可以看到直到请求完成后才body得到该类。loading

有任何想法吗？

---

我还没有以我认为干净的方式对此进行排序，但我找到了解决方案。

如果我在块的setTimeout(function(){上方var products...和}, 1);下方添加products.each，该块就会被延迟，所以 addClass 首先发生。

Answer 1

看一下.ajaxStart jquery 事件。

它看起来像这样

$('#addSelected').ajaxStart(function() {
  $('body').addClass('loading');
});

编辑：我查看了 jquery 文档，发现设置 async = false 会锁定浏览器的其他操作。来自 jquery 文档：

asyncBoolean 默认值：true

默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果需要同步请求，请将此选项设置为 false。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

这可能是导致问题的原因吗？尝试在 ajaxStart 事件中记录到控制台并查看它是否正在触发。