Javascript 在每个循环期间未显示Div类更改

我有一个通过点击按钮触发的javascript函数。在进入“each”循环之前，我向元素添加一个类

在页面中运行代码时，我看不到更改。但是如果我在调试器中暂停代码，我会暂停

代码设置如下：

$("#btnApplyDefaults").on('click',
        function (e) {
    $('#loader').addClass("loading-page");
    $('#pricingSheetItems tr').filter(':has(:checkbox:checked)').each(function() {
        // Do some stuff
    });
    $('#loader').removeClass("loading-page");
});

如果我使用需要很长时间才能运行的数据来运行它，我将永远看不到正在加载的图像。但是，如果我有一个断点，并通过我看到的图像

下面是课程：

div.loading-page {
    position: absolute;
    left: 50%;
    background-image: url("../../dist/img/loading.gif");
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 32px;
    height: 32px;
}

我把它分配给这个部门：

<div tabindex="-1" class="" id="loader"></div>

---

您的所有代码都是同步运行的，这意味着它会在UI响应之前完成所有代码。您可以在开始时添加加载类，执行一些操作，然后删除该类，所有这些都是在UI能够响应之前完成的

如果要更新UI，可以通过setTimeout添加一个小暂停：

 $("#btnApplyDefaults").on('click',
        function (e) {
    $('#loader').addClass("loading-page");
    setTimeout(function () {
        $('#pricingSheetItems tr').filter(':has(:checkbox:checked)').each(function() {
            // Do some stuff
        });
        $('#loader').removeClass("loading-page");
    }, 0);
});

---

这应该显示加载类。我怀疑它不会动画，因为你的页面将忙于计算。您应该考虑使用WebWorkers或某种异步worker来获得更好的用户体验。

在页面中运行代码时，我看不到有什么变化。但是如果我在调试器中暂停代码，我会暂停。因为添加和删除类之间的代码运行得太快，以至于在更新UI之前就发生了。当您在调试器中时，您将手动降低调试器的速度。这是正常的行为。JavaScript运行时处理代码的速度与浏览器更新UI的速度不同步。投票以主题外的方式结束该问题，因为这里确实没有问题。请尝试将removeClass（）行移到您创建的筛选函数中。它可能被调用得太快，代码运行大约30秒。此外，过滤器功能是一个

。每个
。把我的removeClass放进去不就意味着它会被反复调用吗？我投票把这个问题作为离题题来结束，因为这个行为是正常的，而且似乎没有实际问题。如前所述，
removeClass
和
addClass
几乎同时运行。正如所指出的，它的表现与预期相符。如果确实需要显示该图像，则可能需要使用
setTimeout
。否则，请使用异步（如承诺），以便按顺序运行所有内容