Question

我的问题很奇怪。我使用ko.observable()设置页面上加载指标的可见性，如下所示：

<img src="/images/loader.gif" data-bind="visible: isLoading"/>

视图模型：

self.processExcelData = function(data, event) {
        self.isLoading(true)

        ko.utils.arrayForEach(self.someBigArray(), function(item){
            // continuous stuff
        })

        self.isLoading(false)
}

问题在于虽然isLoading实际上是true，而arrayForEach迭代，但加载程序仅在arrayForEach完成后显示。

Answer 1

问题是，当JavaScript运行时，浏览器没有机会重新呈现任何更新。您需要延迟处理以允许敲除更新并且浏览器重新呈现DOM。您可以使用setTimeout：

执行此操作

self.processExcelData = function(data, event) {
    self.isLoading(true)
    setTimeout(function() {
        ko.utils.arrayForEach(self.someBigArray(), function(item){
            // continuous stuff
        });
        self.isLoading(false)
    }, 0);
}

以这种方式使用setTimeout(fn, 0)会导致fn中的代码移动到执行队列的末尾，从而允许浏览器呈现所需的任何更新。

挖空可见性绑定的奇怪行为

1 个答案: