Question

因此，我正在构建一个相当复杂的（从我的角度来看）Javascript中的客户端Web应用程序。

程序基本上做的是从用户那里获取一组（相当大的）字符串数据，从用户那里获取一个关键字列表，执行搜索并返回一个真/假的数组。

很明显它的工作原理是这样的：

var userData = ["lorem ipsum", "dolor sit amet", " consectetur adipisicing"];
var userKeywords = ["et","or"];
var isMatch = false;

for (var x in userData){
    var y = 0;
    while (y<userKeywords.length && !isMatch){
    isMatch = (userData[x].match(userKeywords[y]) !== null)? true : false;
    y++;
    }
}
// That would return [true, true, true]

（这只是为了给你一个主要的想法）

因为我正在处理相当大量的数据（50K ++）和关键字（~50），所以我的程序可以运行几分钟。虽然我们知道不要恐慌并等待大型程序运行，但我的用户不会...

所以我想给他们一些关于程序执行的反馈，当它正在运行就像一个基本进度条那样，但是我找不到。

我知道我可以计算我要求程序执行的任务的长度，然后递增计数器并将结果发布到DOM中 - 但这不是问题to access the DOM in a loop吗？

var userData = ["lorem ipsum", "dolor sit amet", " consectetur adipisicing"];
var userKeywords = ["et","or"];
var isMatch = false;
var myTask = userData.length * userKeywords.length ;
var myCounter = 0;

for (var x in userData){
    var y = 0;
    while (y<userKeywords.length && !isMatch){
    isMatch = (userData[x].match(userKeywords[y]) !== null)? true : false;
    y++;
    myCounter++;
    console.log("Ran " + myCounter + " calculations out of " + myTask);
    }
}

那么，如何向用户提供有关程序执行的反馈？谢谢！

Answer 1

我知道我可以计算出我正在询问程序的任务的长度要做，然后增加一个计数器并将结果发布到DOM

我会那样做。

document.getElementById('output_progress').innerHTML = y + "/" + userData.length;

如果您不想输出任何内容，那么告诉人们该程序仍在工作的最佳方式是使用gif加载程序图像。这就是我通常在我的应用中添加的内容。

Answer 2

根据您支持的浏览器，您可以选择Web工作人员（每http://caniuse.com/#feat=webworkers IE10是您的最低门槛），或者是“chunked”处理程序。使用回调或承诺，您可以非常轻松地创建一个支持的标准API - 尽管Web工作者会更快，UI响应也会更顺畅。

这是一个非常粗略的例子：http://plnkr.co/edit/u72tKlLR1yKvgJBsnUK9（请注意，在script.js的第5行，我已经禁用了网络工作者，因为我们的大多数浏览器都会使用它而且我希望证明它会没有它们的工作 - 只需删除&& false以重新启用它。

不幸的是，我一直很懒，只是复制并粘贴了两次代码。使用XHR，您可以将代码保存在一个位置，然后使用Web worker或run函数将其拉入。 “跑步者”是我过去做过的非常普遍的事情，可以提供某种UI反馈。它需要整个任务的“块”，运行它..然后停止并等待一秒钟，然后继续下一个块。通常这足以让屏幕更新。

向用户提供有关Javascript函数执行的反馈？

2 个答案: