Javascript 添加CSS类不会由浏览器呈现

我有以下代码（主干视图，使用手柄渲染）：

CSS类在屏幕上显示“加载”消息以警告用户，因为由于数据量大和渲染复杂，渲染需要时间

我的问题是CSS类被正确应用（我在inspector中看到），但屏幕上没有显示任何内容。 如果我设置断点并一步一步地进行，它将完美地工作

---

Chrome和Firefox都会出现此问题。

浏览器中没有同步的渲染功能。因此，您的

otherCPUConsumingRenderingFunctions

很可能会在您调用它时立即返回。它稍后异步地做它的事情

---

这就是为什么加载类一添加就被删除的原因。

很可能需要在呈现函数完成后使用回调。还要记住，昂贵的渲染操作（取决于它们的设计）可能会被阻塞，这意味着dom在所有工作完成之前没有机会重新渲染。在这种情况下，它将添加

加载

类，并在dom重画之前将其全部删除。单步执行代码提供了重新渲染的浏览器时间，这就是为什么调试时会看到它工作的原因

也许是这样的

_this.otherCPUConsumingRenderingFunctions = function (callback) {
    // do work here
    callback();
};

_this.$el.addClass("loading");

_this.el.innerHTML = _this.template({
    some: data
});


// You can use a timeout to "schedule" this work on the next tick.
// This will allow your dom to get updated before the expensive work begins.
window.setTimeout(function () {
    _this.otherCPUConsumingRenderingFunctions(function () {
        // Ensure this only runs after the rendering completes.
        _this.$el.removeClass("loading"); 
    });
}, 1);

---

创建该项目是为了帮助缓解此类问题。它在主干网上也能很好地工作。

jQuery是正确的。这门课似乎没有被应用。检查CSS路径和语法。其他CpuConsumingRenderingFunctions到底是什么？它有异步功能吗？你说它是一步一步地工作的，所以它发生得如此之快，以至于你看不到：）。谢谢阿尔瓦罗的快速回复。正如我所提到的，CSS工作得很好：我在其他情况下使用它，一步一步的调试效果非常好。我尝试将console.log（Date.now（））放在所有地方，并且计时看起来很好。但是如果你有办法添加回调，我会很高兴：）你需要先粘贴渲染函数的细节哦，顺便说一句，我忘了提到，类是在正确的时间添加和删除的。由于渲染需要几秒钟，我可以在inspector中看到它。它确实有效，谢谢你（尽管我需要至少100毫秒的超时时间才能使其有效…）我感觉你误解了答案（如果你需要100毫秒才能使解决方案有效）

_this.otherCPUConsumingRenderingFunctions = function (callback) {
    // do work here
    callback();
};

_this.$el.addClass("loading");

_this.el.innerHTML = _this.template({
    some: data
});


// You can use a timeout to "schedule" this work on the next tick.
// This will allow your dom to get updated before the expensive work begins.
window.setTimeout(function () {
    _this.otherCPUConsumingRenderingFunctions(function () {
        // Ensure this only runs after the rendering completes.
        _this.$el.removeClass("loading"); 
    });
}, 1);