ブラウザの注意を独占しないように、時々ブラウザに制御を解放する必要があります。
制御を解放する 1 つの方法は、 を使用することsetTimeout
です。これは、ある期間に呼び出される「コールバック」をスケジュールします。例えば:
var f1 = function() {
document.body.appendChild(document.createTextNode("Hello"));
setTimeout(f2, 1000);
};
var f2 = function() {
document.body.appendChild(document.createTextNode("World"));
};
ここで呼び出すと、ドキュメントにf1
単語が追加hello
され、保留中の計算がスケジュールされ、制御がブラウザーに解放されます。最終的に、f2
呼び出されます。
setTimeout
あたかも魔法の妖精の粉であるかのように、プログラム全体に無差別にまき散らすだけでは不十分であることに注意してください。残りの計算をコールバックにカプセル化する必要があります。通常、 はsetTimeout
関数の最後にあり、残りの計算はコールバックに詰め込まれます。
特定のケースでは、コードを次のように慎重に変換する必要があります。
var heavyWork = function(i, onSuccess) {
if (i < 300) {
var restOfComputation = function() {
return heavyWork(i+1, onSuccess);
}
return doSomethingHeavy(i, restOfComputation);
} else {
onSuccess();
}
};
var restOfComputation = function(i, callback) {
// ... do some work, followed by:
setTimeout(callback, 0);
};
これにより、すべてのブラウザに制御が解放されますrestOfComputation
。
この別の具体的な例として、以下を参照してください:一連のサウンド HTML5 <audio> サウンド クリップをキューに入れ、順番に再生するにはどうすればよいですか?
上級の JavaScript プログラマーは、このプログラム変換を行う方法を知っている必要があります。この手法を使用すると、制御を解放できる各関数がコールバック関数を受け取る、独特のスタイルでプログラムを作成する必要があることがわかります。このスタイルの専門用語は、「継続渡しスタイル」または「非同期スタイル」です。