1

Javascript コードには、さまざまな画像をキャンバスに描画するなどの長い操作を実行する関数がいくつかあります。これらの機能が実行されている間、ユーザーが UI のボタンにアクセスできないようにするため、すべての上に大きなモーダル div を配置して、プロセスの実行中にボタンを隠します。しかし、コードは継続的であるため、UI が実際に更新される機会はなく、モーダル div はプロセスの最後に削除されるため、実際には表示されないことにすぐに気付きました。

私の質問は、このタイプのシナリオで UI を隠す必要が本当にあるのでしょうか? 操作の実行中にユーザーが別のボタンを押した場合、新しいプロセスは前のプロセスが完了するまで待機してから開始しますか? あるいは、ユーザーがUI をクリックした時点でモーダル UI が起動しているはずだったため、モーダルが新しいプロセスの開始を妨げている可能性があります。別の方法として、モーダル div を起動した直後にタイムアウトを設定して、プロセスを開始する前に UI を更新する時間を設定することもできますが、これが必要かどうかはわかりません。

4

4 に答える 4

1

エンジンがjavascriptを実行する方法のため、divが必要です。あなたがそれを読みたいのなら、それは非常に興味深いです-ジョン・レシグ以外によって書かれました（私が誇張しすぎているならすみません、hehe）http://ejohn.org/blog/how-javascript-timers-work/。タイマーとインターバルについてですが、

読む気がない場合は、要約を次に示します。コードは同じスレッドで実行され、ブラウザーが時間を見つけると、現在のコードを一時停止し、別の何かを開始します-実行自体は停止しません-パス一時的に変更されます。投稿全体を読むことを強くお勧めします。

于 2012-05-06T10:42:14.063 に答える
1

@Parth が指摘したように、ブラウザーは javascript を単一のスレッドで実行するため、<div>オーバーレイが存在しない場合、UI イベントはトリガーされますが、長時間実行される関数が完了するまでキューに残ります。ただし、通常、この動作は想定されていません。UI をフリーズしたい場合は、<div>オーバーレイを保持してください。

ブラウザーに UI を更新する機会を与える (またはユーザーが処理をキャンセルできるようにする) 場合は、実行時間の長い関数ロジックをさまざまな関数呼び出しに分割し、window.setTimeout calls. このパターンを実装するにはいくつかの方法がありますが、私は非再帰的なクロージャ キュー アプローチが好きです。

// this will block UI until all images are painted:
function paintAll(arImg) {
    for(var i=0; i<arImg.length; i++) paintSingle(arImg[i]);
}

// this will block UI only while each image is painted:
function paintAll(arImg) {
    // copy arImg to queue not to modify the input parameter
    var queue = arImg.slice(0);

    // apply the paint function to the first element, remove it from queue
    // and set the runner function to run again after 5 milliseconds
    // (this will allow the UI thread to run between each runner call)
    var runner = function() {
        // check any UI based condition to abort running:
        if(!checkUiBasedCondition()) return;

        if(!queue.length) return;
        paintSingle(queue.shift());
        window.setTimeout(runner, 5);
    }

    // call runner to initiate the processing
    runner();
}

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/shift https://developer.mozilla.org/en/DOM/window.setTimeout

于 2012-05-07T11:37:41.700 に答える
1

疑わしい場合は、独自のタスク制御を行ってください。「単一の」操作を開始すると、進行中であることを示すフラグが立てられます。このタスクを再度開始する UI 要素からメッセージを受信した場合は、return. 完了したら、フラグを削除します。

于 2012-05-01T22:46:42.963 に答える
1

はい、カバー div が必要です。いいえ、新しいプロセスは、開始する前に前のプロセスが完了するまで待機しません (そうするようにコーディングしていない限り)。

再描画を強制する簡単な方法は、ミリ秒を使用setTimeoutすることです。0再レイアウトはできるだけ早く行う必要があります。

于 2012-05-01T22:46:50.503 に答える