5

我试图有一个按钮,onclick 将loading在发出一系列 ajax 请求之前将一个类(将光标设置为“等待”)应用到正文。

代码是:

$('#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 回调,但没有区别。

在萤火虫中,我可以看到直到请求完成后body才能获得课程。loading

有任何想法吗?


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

如果我在块的末尾和setTimeout(function(){上方添加,则该块会延迟,因此 addClass 首先发生。var products...}, 1);products.each

4

2 回答 2

3

看看.ajaxStart jquery 事件

它看起来像这样

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

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

asyncBoolean 默认值:true

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

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

于 2010-03-31T14:09:34.270 回答
0

您使用的是什么版本的 jQuery?我正在做非常相似的功能,我的调用总是在 ajax 调用之前进行。我正在使用 v1.4.2 的 jQuery,所以也许你的问题是旧版本?

此外,由于您正在执行“each()”循环,因此您肯定需要在调用 .ajax 之前调用 addClass。

于 2010-03-31T14:25:34.727 回答