JavaScriptでメッセージのスクロール表示

ゲームのテキスト表示でよくあるスクロールするメッセージ表示を実現したい。
色々方法はあると思いますが、一文字づつDOMに追加していくか、テキストをsubstringで一文字ずつ長くしていきながら書き換えるかです。

以下に記述するコードはjQueryが必要です。

<div id="box" />
<script type="text/javascript">
var text ="漢字alpha0123456789;"
function show(length) {
  if (pos >= text.length) {
    return;
  }

  $('#box').text(text.substring(0, length);
  setTimeout( function() { show(length + 1); }, 15.625 );
}

show(1);
</script>

<div id="box" />
<script type="text/javascript">
var text ="漢字alpha0123456789;"
function show(pos) {
  if (pos >= text.length) {
    return;
  }

  $('#box').append(text.charAt(pos));
  setTimeout( function() { show(length + 1); }, 15.625 );
}

show(0);
</script>

軽くノーウェイトでベンチマークしてみましたが、それほどの差は無かったです。
次によくあるメッセージのスクロール表示のキャンセル機能を考えてみます。
まあ、これは単純にクリックなりキー押下なりでキャンセルフラグを設定すれば良いでしょう。

var text ="漢字alpha0123456789;"
var cancel = false;
function show(length) {
  if (pos >= text.length) {
    return;
  }
  if(cancel) {
    $('#box').text(text); //全部表示して終了
  } else {
    $('#box').text(text.substring(0, length);
    setTimeout( function() { show(length + 1); }, 15.625 );
  }
}
$('#box').click(function() { cancel = true; });
show(1);

会話や文章の切れ目を意識してユーザーからのクリックを待機する方法について考えてみます。
ここは難しいことを考えずに、一度にスクロール表示するテキストを一つの文字列として全体を配列で保持することにします。
そして、ひとつのテキストのスクロール表示が終わるとユーザーからのアクション（クリック）があるまで待ち、アクションがあると次のテキストを再びスクロール表示します。

var data = ["first","second", "third"];

MessageBox = function(data) {
 this.content = $('#box');
 this.data = Array.apply(null, data); //配列のクローンを渡す。
 this.next();
 $('body').bind("click", this, this.click);
}
MessageBox.prototype = {
 sliding: false,
 clear: function() {
     this.content.text('');
 },
 next: function() {
     this.clear();
     this.text = thi.data.shift();
     slideText(1);
     var me = this;
     function slideText(length) {
          var text = me.text;
          if (me.cancel) {
              return;
          }
          if (length < text.length) {
              me.sliding = true;
              me.content.text(text.substring(0, len));
              setTimeout(function () { slideText(length + 1); }, 15.625);
          } else {
              me.sliding = false;
          }
     }
 },
 click: function(e) {
   var me = e.data;
   if (me.sliding) {
      me.cancel = true; //キャンセルして現在のテキストを一括表示する。
      return false;
   }
   //次のテキストがあれば、スクロール表示する。
   if (me.data.length == 0) {
      $('body').unbind("click", me.click);
      me.clear();
    } else {
      me.next.apply(me);
    }
　  return false; 
 } 
}

このままでは前回表示したテキストが消えてしまいます。RPGでは、テキストを縦に流して行きたいかもしれません。
また、会話の途中で選択肢を求めることもありますが、そこらへんについては割愛します。
とりあえず一連の表示やコマンドに対応したコントロールのデモを用意しておきました。