javascript - 浏览器不会呈现添加CSS类的信息

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

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

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

_this.otherCPUConsumingRenderingFunctions();

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

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

我的问题是CSS类已正确应用（我在检查器中看到了它），但屏幕上没有任何显示。
如果我设置断点并逐步进行，它会完美地工作。

Chrome和Firefox均会出现此问题。

最佳答案

渲染功能完成后，很可能需要使用回调。还要记住，昂贵的渲染操作（取决于它们的设计）可能会阻塞-意味着在完成所有工作之前，dom不会有机会重新渲染。在这种情况下，它将添加loading类并在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);

backburner.js项目的创建是为了帮助减轻此类问题。它也适用于Backbone。