onchangeで呼び出すメソッドにthis.valueを入れたら、出力される結果がおかしいんです。

Question

<input type="text" onchange="disp(this.value)"> function disp(str){}
と書くと、一度目は正しく表示されますが、2度目以降で前の文字列と混ざったような結果になります。
一度試してみてください。test.html
これを、
<input type="text" onchange="disp(this)"> disp(obj){str = obj.value;}
に変更してみたら正しく表示されました。

ほぼ同じ処理をしていると思いますが、なにが違うんでしょうか？

追記
解決しました。
普段javaを使っているので、文字列の長さをlength()で出そうとしてエラーしたことと、setIntervalの止め方が間違っていたことが原因でした。

     `setInterval(function(){`               ⇒    `t = setInterval(function(){`

if(i == str.length()) clearInterval(); ⇒ if(i == str.length) clearInterval(t);

Answer 1

リンク先を見ると、str.length()で落ちて clearInterval が実行されないので、常にループし続けています。
changeイベントが発火するたびにループが増えて、並列処理のように前の処理と重なっています。
なぜintervalでループしているのですか？ アニメーション風にしたいのですか？

Comments

[otftrough]

回答ありがとうございます。
はい、アニメーション風にしたいと思いました。ただの暇つぶしですが。
"str.length()で落ちて clearInterval が実行されない"とはどういう意味でしょうか？

[otftrough]

解決しました。ありがとうございます。

[tozjp]

str.length は関数ではないので実行しようとするとエラーで処理が終了していまいます。
エラーで終了すると、次のループをキャンセルするための clearInterval が実行されないし、次のループのための setInterval はすでに実行されているので、また0.05秒後には次の処理が始まります。

それと落ちる落ちないとは別にですが。
非同期な処理がイベントによって開始される場合、非同期処理が最後まで完了する前にもう一度イベントが発生して、処理が2重に走ってしまった場合にどうなるかを常に考える必要があります。

今回の場合、最初のイベントによる（例えば）10文字目の処理をしようとしている時に、2個めのイベントによる1文字目の処理が始まってしまった場合。

(イベントの順番 . 文字の位置 と表現すると)
…　1.8　1.9　1.10　2.1　1.11　2.2　1.12　2.3　…

のような順番で処理されてしまいます。

以上の観点で修正をしてみてください。

[otftrough]

どうでしょうか
http://blog-imgs-86.fc2.com/b/l/o/blogbyegc/test3.html