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);
});

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

在.each循环期间不显示Div类更改

1 个答案: