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

我正在尝试一个按钮,它会在发出一系列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才获得加载类.

有任何想法吗？

我没有以我认为干净的方式进行此排序,但是我找到了解决方案.

如果我在var product …和}上加上setTimeout(function(){,1);在product.each块的末尾下方,该块将延迟,因此addClass首先发生.

最佳答案

看一下.ajaxStart jquery event.

看起来像这样

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

编辑：我看了一下jquery文档,发现设置async = false锁定了浏览器的其他操作.从jquery文档中：

异步布尔
默认值：true

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

这可能是造成问题的原因吗？尝试在ajaxStart事件中登录控制台,看看它是否正在触发.