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

Question

总结：我有一个可观察的控制加载页面元素，该元素在长时间运行的查询期间隐藏所有内容。即使在查询之前更改了 observable，加载页面也不会显示。放置一个占位符 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

顺便说一句，这里是extenders 和binding handlers 的淘汰参考。