setTimeout関数の的確利用
コンピュータ処理は何事も瞬時に事を成し遂げてしまいます。ゆったり、ゆっくり行うには高度な技を行使しなければなりません。筆記体で一筆書きのようにサインする様を表現したことがあります。かなりの労力を要したと記憶しています。
興味のある方には下記のページをご覧ください。多くのテクニックが詰まっていることでしょう。
今回、有名な囲碁の格言を数十個、描写することになり、格言の長さに比例して表示時間を調整する処理を整理してみました。画面は紙芝居のように格言ごとに改まるので、長い格言ならば長い表示時間になるように制御されます。まずは表示例をご覧ください。再実行はブラウザのロードボタンを使います。
Result
参考コード
<html>
<head>
<meta charset="utf-8">
<title>文字数に応じて表示時間を設定する</title>
</head>
<body>
<div id="screen" style="position:relative; width:70%; height:auto; margin:0 auto; font-size:48px; border:1px solid black;"></div>
<script type="text/javascript">
const kakugen=[ "「二子の頭は見ずハネよ」自分と相手の石が二子ずつ並んで対峙した状態の時、相手の頭をハネるのは多くの場合に急所となる",
"「厚みに近寄るな」相手の厚みに近よると、攻めの標的とされやすい",
"「二筋は敗線、四筋は勝線」二線を必要以上にハウのは、地が1目ずつしか増えないのに相手の厚みがそれ以上に増えよくない。四線をノビていくのは地が3目ずつ増えて効率がよい",
"終了"];
var count=0; //長期に記憶を要すのでグローバル変数
calcTime(count); //表示情報を調査し時間制御を織り込む
function calcTime(){ //文字数に応じて表示時間を設定し表示する
mojisu=kakugen[count].length; //1回に表示する文字数
var tm=mojisu * 80; //文字数から求まる表示時間数
document.getElementById('screen').innerHTML="<span style='color:pink;'>"+mojisu+"文字 "+tm+"ms</span><br>"+kakugen[count];
console.log(count, kakugen[count].length, tm, kakugen[count], document.getElementById('screen').innerHTML);
if(++count<kakugen.length) setTimeout(calcTime, tm); //終了チェック
}
</script>
</body>
</html>