重い処理によるUIへのブロックを抑制するには、setTimeoutを使います。次のようにして、重い処理を分割して、分割した処理の間にユーザインタフェース用のスレッドが動けるようにします。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>setTimeout sample 1</title>
</head>
<body>
<div id="target" style="position:absolute;">target</div>
<script>
var INTERVAL=500;
var current_text = "";
function log(message) {
current_text = current_text + '<br />' + message;
document.getElementById('target').innerHTML = current_text;
}
function proc1() {
log("start proc1");
// 重たい処理１
log("end proc1");
}
function proc2() {
log("start proc2");
// 重たい処理２
log("end proc2");
}
function proc3() {
log("start proc3");
setTimeout(function() {
proc1();
// ここでUIへのブロックが抑制される
setTimeout(proc2, INTERVAL);
}, INTERVAL);
log("end proc3");
}
proc3();
</script>
</body>
</html>
JavaScriptについては、下記の書籍の参考になるでしょう。
プログラミング言語一般については、下記が参考になるでしょう。
- クラスベースのオブジェクト指向プログラミング言語の基礎を学ぶには … 改訂版 基礎Java(CD-ROM付) (IMPRESS KISO SERIES)
- クラスベースのオブジェクト指向プログラミング言語を学ぶには … プログラミング言語Java (The Java Series)
- 関数型プログラミング言語を学ぶには … Scalaスケーラブルプログラミング第2版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)