1

所以我正在用Javascript构建一个相当复杂的（从我的角度来看）客户端网络应用程序。

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

很明显它是这样工作的：

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

那么，我怎样才能就程序的执行向我的用户提供反馈呢？谢谢！

4

2 回答 2

0

我知道我可以计算我要求程序执行的任务的长度，然后增加一个计数器并将结果发布到 DOM

我会同意的。

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

如果你不想输出任何东西，那么告诉人们程序仍在运行的最好方法是使用 gif 加载器图像。这就是我通常在我的应用程序中添加的内容。

于 2014-05-05T10:26:05.027 回答
0

根据您支持的浏览器，您可以使用网络工作者（根据http://caniuse.com/#feat=webworkers IE10 是您的最低阈值），也可以使用“分块”处理程序。使用回调或承诺，你可以很容易地创建一个标准的 api 来支持两者——尽管 webworkers 会更快并且 UI 响应会更流畅。

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

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

于 2014-05-05T10:39:58.690 回答