1

だから私は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);
    }
}

では、プログラムの実行についてユーザーにフィードバックするにはどうすればよいでしょうか? ありがとう！

4

2 に答える 2

0

プログラムに要求しているタスクの長さを計算し、カウンターをインクリメントして結果を DOM に投稿できることを知っています。

私はそれで行きます。

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

また、何も出力したくない場合は、プログラムがまだ動作していることを人々に伝える最良の方法は、gif ローダー イメージを使用することです。それが私が通常アプリに追加するものです。

于 2014-05-05T10:26:05.027 に答える
0

サポートされているブラウザーに応じて、Web ワーカー ( http://caniuse.com/#feat=webworkers IE10 が最小しきい値) または「チャンク」ハンドラーのいずれかを使用できます。コールバックまたはプロミスを使用すると、いずれかをサポートする標準 API を非常に簡単に作成できますが、Webworkers は高速になり、UI 応答はよりスムーズになります。

非常に大雑把な例を次に示します: http://plnkr.co/edit/u72tKlLR1yKvgJBsnUK9 (script.js の 5 行目で Web ワーカーを無効にしていることに注意してください。これは、ほとんどのブラウザーがいずれにせよそれを使用し、表示したいと思っていたからです)それらがなくても機能することを確認してください - を削除し&& falseて再度有効にします)。

残念ながら、私は怠け者で、コードを 2 回コピーして貼り付けただけです。XHR を使用すると、コードを 1 つの場所に保持してから、Web ワーカーまたは実行関数の両方を使用してプルすることができます。「ランナー」は、ある種の UI フィードバックを提供するために過去に行った非常に一般的なことです。タスク全体の「チャンク」を取得して実行し、停止して 1 秒待機してから、次のチャンクに移動します。通常、画面を更新するにはこれで十分です。

于 2014-05-05T10:39:58.690 に答える