Question

我有以下代码（Backbone视图，使用Handlebars渲染）：

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

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

_this.otherCPUConsumingRenderingFunctions();

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

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

我的问题是CSS类被正确应用（我在检查器中看到它）但屏幕上没有显示任何内容。如果我提出断点并逐步进行，它将完美地运作。

Chrome和Firefox都会出现此问题。

Answer 1

浏览器中的渲染功能不同步。所以你的otherCPUConsumingRenderingFunctions很可能在你打电话后立即回来。它后来是异步的。

这就是为什么你的加载类会在添加后立即删除。

Answer 2

在渲染功能完成后，您很可能需要使用回调。还记得昂贵的渲染操作，取决于它们的设计，可以阻塞 - 这意味着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。

浏览器不呈现添加CSS类

2 个答案: