Question

总结：我有一个observable控制一个加载页面元素，在长时间运行的查询中隐藏所有内容。即使在查询之前更改了observable，加载页面也不会显示。放置占位符setTimeout有效，但页面似乎等待查询运行以更新页面。

编辑3：我应该提到我在Node.js中这样做。

Edit2：我想要发生的事情：

1）用户点击按钮 2）装载屏幕盖板。
3）计算运行
4）加载屏幕消失，表格填入结果

目前正在发生什么：
1）用户点击按钮 2）计算运行时屏幕冻结3-4秒 3）表格填充结果

解释我们在页面上有几个长时间运行的查询（大约需要3-4秒），我们想要加载一个加载屏幕来隐藏控件并通知人们页面正在运行。

这是我写的一个扩展程序（在互联网的帮助下）：

<div class="row table__row" data-bind="Loading:isLoading">

我将bindingHandler附加到包含我想要隐藏的结果的div，直到它们准备就绪：

this.load =  _ => {
        var _self = this
        this.isLoading(true)
        this.search()
        this.isLoading(false)
    }

在运行查询之前设置this.isLoading（true），然后在查询后将其设置为false。以下内容不起作用：

this.load = _ => {
        var _self = this
        this.isLoading(true)
        setTimeout(function () {
            _self.isLoading(false);
        }, 3000)
    }

但是，如果我暂停，则加载页面会正确显示。

this.search = async _ => {
//bunch of filters/calculations on large arrays
this.results(the results of our large calculations)
}

我也尝试过几种异步方法，但我对此并不了解。那么，如何在查询运行之前显示加载页面，然后在查询完成后消失？感谢。

编辑：得到了我们的搜索功能的一些请求。它看起来像这样（我们不使用Ajax）

Answer 1

使用绑定处理程序并非严格必要，因为您只能在一个方向上执行操作。

保持简单：

this.isLoading.subscribe(function(value) {
  ... get elements
  $children.toggle(!value);
  $loader.show(value);
});

在您发表评论之后，我相信您需要的只是稍微推迟您的长时间运行工作，在加载微调器显示之后，就像这样：

    this.isLoading(true);
    setTimeout(function () {
        this.search();
        this.isLoading(false);
    }, 100);

这是一篇关于promises和异步代码之间差异的文章：https://stackoverflow.com/a/20930199/4845566

顺便说一句，这是extenders的Knockout参考，这里是binding handlers的参考文献。

淘汰：在等待查询完成时加载页面

1 个答案: