javascript - knockout 可见性绑定(bind)的奇怪行为

Question

我的问题比较奇怪。我使用 ko.observable() 设置加载指示器在页面上的可见性，如下所示:

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

View 模型:

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 运行时，浏览器没有机会重新呈现任何更新。您需要延迟处理以允许 knockout 更新并允许浏览器重新呈现 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 中的代码移动到执行队列的末尾，从而允许浏览器呈现任何更新需要。