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

发布于 2024-08-26 21:38:16 字数 1319 浏览 5 评论 0原文

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

代码是：

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

有什么想法吗？

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

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

原文

I'm trying to have a button that onclick will apply a class loading (sets cursor to "wait") to the body, before making a series of ajax requests.

Code is:

$('#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');
            }
        });
    });
});

I've tried doing

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

both before the requests, and as a beforeSend callback, but there is no difference.

In firebug I can see that body doesn't get the loading class until after the requests are complete.

Any ideas?

I've not got this sorted in a way I consider to be clean, but I have found a solution.

If I add setTimeout(function(){ above var products..., and }, 1); below the end of the products.each block, that chunk gets delayed, so addClass happens first.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

后eg是否自 2024-09-02 21:38:16

看一下 .ajaxStart jquery 事件。

它看起来像这样

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

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

asyncBoolean
默认值： true

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

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

Take a look at the .ajaxStart jquery event.

It would look something like this

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

EDIT: I took a look at the jquery documentation and found that setting async = false locks the browser from other actions. From the jquery documentation:

asyncBoolean
Default: true

By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Might this be causing the issue? Try logging to the console in the ajaxStart event and see if it is firing.

回复收藏 0 原文