Question

我正在尝试使用onclick按钮，在发出一系列ajax请求之前，将一个类loading（将光标设置为“wait”）应用于正文。

代码是：

$('#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 event。

它看起来像这样

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

编辑：我看了一下jquery文档，发现设置async = false会阻止浏览器执行其他操作。从jquery文档：

asyncBoolean 默认值：true

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

这可能导致这个问题吗？尝试在ajaxStart事件中登录到控制台，看看它是否正在触发。

Answer 2

您使用的是哪个版本的jQuery？我正在做非常相似的功能，我的调用总是在ajax调用之前发生。我正在使用jQuery的v1.4.2，所以也许你的问题是旧版本？

另外，由于你正在进行“each（）”循环，你肯定需要在.ajax调用之前调用addClass。

jQuery addClass（）在jQuery.ajax（）之前没有运行

2 个答案: