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

Question

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

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

很明显，它是这样工作的：

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中-但是循环访问DOM会不会有问题？

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

根据支持的浏览器，您可以与网络工作者（按照http://caniuse.com/#feat=webworkers IE10的最低要求）一起使用，也可以使用“分块”处理程序。 使用回调或Promise，您可以轻松地创建一个标准API来支持这两种方法-尽管Webworker会更快，UI响应也会更流畅。

这是一个超级粗糙的示例： http : //plnkr.co/edit/u72tKlLR1yKvgJBsnUK9 （请注意，在script.js的第5行中，我已禁用了网络工作者，因为我们的大多数浏览器仍会使用它，我希望展示一下（如果没有它们，则可以正常工作-只需删除&& false即可重新启用）。

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