javascript - 在 .each 循环期间未显示 Div 类更改

Question

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

在页面中运行代码时，我没有看到变化。但如果我在调试器中暂停代码，我会这样做。

代码是这样设置的:

$("#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:

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

Answer 1

您的所有代码都同步运行，这意味着它会在您的 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);
});

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