敲除:在等待查询完成时加载页面

Question

摘要:我有一个可观察到的控制加载页面元素的控件，该元素在长时间运行的查询中隐藏所有内容。即使在查询之前更改了可观察到的内容，加载页面也不会显示。放置占位符setTimeout有效，但是页面似乎要等待查询运行才能更新页面。

编辑3:我应该提到我是用Node.js来做这个的。

Edit2:我想要发生的事：

1)用户点击按钮。

2)加载屏幕覆盖表。

3)运行的计算

4)加载屏幕消失，表中填充结果

目前正在发生的情况：

1)用户点击按钮。

2)计算运行时屏幕冻结3-4秒。

3)表中填充了结果

说明我们的页面上有几个长时间运行的查询(大约需要3-4秒)，我们希望设置一个加载屏幕来隐藏控件，并通知用户页面正在运行。

下面是我写的一个扩展程序(在互联网的帮助下)：

ko.bindingHandlers.Loading = {
init: function (element) {
    $(element).append("<div id='loading_wrap' class='loader' style='height:100%; width:100%;text-align:center; margin-top: 20%'><img src='./resources/ajax-loader.gif'><br>Loading, please wait.</div>")
},
update: function (element, valueAccessor) {
    var isLoading = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    var $children = $element.children(':not(.loader)');
    var $loader = $(element).find('.loader');

    if (isLoading) {
        $children.hide();
        $loader.show();
    } else {
        $children.show();
        $loader.hide();

    }
}

我将bindingHandler附加到包含我想隐藏的结果的div中，直到它们准备好为止：

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

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

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

但是，如果我输入了一个超时，则加载页将正确显示。

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

我也尝试过几种异步方法，但我对此没有很好的理解。那么，如何使加载页在查询运行之前出现，然后在查询完成后消失呢？谢谢。

编辑:有一些要求我们的搜索功能。它看起来像这样(我们不使用Ajax)

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

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);

这里有一篇关于承诺和异步代码之间的区别的文章：https://stackoverflow.com/a/20930199/4845566

顺便说一句，这里是扩展器和绑定处理程序的淘汰赛引用。