JavaScriptの文字表示速度

質問

こんにちは。
JavaScriptの事でお聞きしたい事があります。

まではこれを見てください。

<SCRIPT language="JavaScript">
<!--
msg = "ここにメッセージを入力すると、途中から少しだけ早くなる";
stcnt = 0;
wid =60;
blnk = "";
for(i=0; i<wid; i++) blnk += " ";
str = blnk + msg ;
timeID = 10;

function scroller()
{
document.guide.message.value = str.substring(stcnt++,stcnt+wid);
if (stcnt>msg.length + wid) stcnt=0;
clearTimeout(timeID);
timeID = window.setTimeout("scroller()",100);
}
// -->
</SCRIPT>

--------------------
文字を出したいところに
<SCRIPT language="JavaScript">
<!-----
document.write("<CENTER><FORM NAME='guide'>")
document.write("<INPUT TYPE='text' NAME='message' SIZE=40></FORM></CENTER>")
scroller();
// -->
</SCRIPT>
--------------

と張ります。

このスクリプトですが、htmlに張ると小さい文字表示の部分が出てきて
右から左にむかって文字が流れていきますが、途中から
文字の表示速度が速くなっています。

これてなぜか自分でもいろいろとやってみたのですが、いまいちよくわかりません。

説明をお願いできますでしょうか。
よろしくお願いします。

回答No.3

leaz024

No.1 の回答のように、確かに setTimeout には複数起動すると全体が加速するという不具合（仕様？）がありますが、この使い方ならば問題ありません。それどころか、timeID を保持して clearTimeout する必要すらありません。

原因は No.2 でも書かれているように、空白が半角になっていることです。また、テキストボックスはデフォルトがプロポーショナルフォントなので、style="font-family:monospace" を追加して等幅フォントにしてやると、完全にブレがなくなります。

blnk += " "; のところを全角スペースに替えるだけでも解決できますが、次のようにするとより滑らかにスクロールさせることができます。

msg = "ここにメッセージを入力すると、途中から少しだけ早くなる";
stcnt = 0;
wid = 40;
blnk = "";
for(i=0; i<wid; i+=2) blnk += "　";
str = blnk + msg;

function scroller()
{
document.guide.message.value = ((++stcnt & 1) ? "" : " ") + str.substring(Math.floor(stcnt / 2));
if (stcnt == msg.length*2+wid) stcnt=0;
window.setTimeout("scroller()",100);
}

回答No.2

koutarou504

ちょっとした落とし穴でしよ・・・。

blnk 変数に入れているのは、「半角」のスペースですよね。
で、msg 変数に入れているのは「全角」です。
つまり、半角のスペースが削れている間は
その半角分で流れている（実際には文字列データが減っている）のですが、
全角のメッセージデータが削れている間は、
半角１文字より見た目のサイズが大きいのに
その全角分で流れます。

簡単な対応は、blnk 変数に入れるのは、「全角」のスペースにする事です。

それから、検証方法ですが、
同一処理を２つ用意して、比較検証するとか、
処理を絞りながらより簡素化していくとかして
検証するでしよ！
例えば、blnk変数にスペースを設定する繰り返し処理をなくし、長さ 60 のスペースを代入するとか、
スペース自体を無くしてみるとか・・・。

回答No.1

you_sei

setTimeout() のインスタンスが、clearTimeout()ではクリアされずに、複数の setTimeout()が、働く様になるから

この場合だと、setInterval() を使った方が良いと思われます