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

时间:2017-07-22 20:21:38

标签: javascript node.js asynchronous knockout.js loading

总结:我有一个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)

N

1 个答案:

答案 0 :(得分: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的参考文献。