【JS】 タイプライターのように表示するには... ～ setTimeout()を使用する ～

JavaScript

 ■ はじめに

 * ふっと、タイプライターのように表示するのって
　どうするんだろうと思ったので調べてみた
 * 以下のサイトを参考にさせてもらった

http://javascript123.seesaa.net/article/111409276.html

 * 汎用的に使いたいので、クラス名「typeWriter」を指定したら、
   そこがタイプライター表示するようにしてみた

 ■ サンプル

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>文字を1文字ずつ表示</title>
<style type="text/css">
.typeWriter {
  visibility: hidden;
}
</style>
</head>
<body>
<span class="typeWriter">メッセージをタイプライターのように1文字ずつ表示します。</span>
<script type="text/javascript">
// クラス名
var TargetClassName = "typeWriter";
// 表示の速さ
var DisplaySpeedMiliSec = 150;
// カーソルアイコン
var CursorIcon = "_";

window.onload = displayLikeTypeWriter;

function displayLikeTypeWriter() {
  var counter = 0;
  var elements = document.getElementsByClassName(TargetClassName);
  for(var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.style.visibility = "visible";
    display(element, element.innerHTML, counter);
  }
}

function display(element, message, counter) {
  element.innerHTML = message.substring(0, counter) + CursorIcon;
  counter++;
  setTimeout(function() {
    display(element, message, counter);
  }, DisplaySpeedMiliSec);
  if (counter > message.length) {
    // 最後はカーソルアイコン表示を上書きする
    element.innerHTML = message;
  }
}
</script>
</body>
</html>

 ■ 補足

 * サンプルを実現するためにいくつか使用した技術をメモっとく。
 【1】コールバック関数の引数にオブジェクトを渡す

 * setTimeout()の第一引数にコールバック関数を渡すのだが、
   引数を渡す、しかも、オブジェクトを渡すのに戸惑ってたら
   以下のサイトを参考になった

http://shim0mura.hatenadiary.jp/entry/20110619/1308490737

 関連記事

 タイマー処理 ～ setTimeout / setInterval etc ～
https://dk521123.hatenablog.com/entry/2021/02/01/000000
 【JS】【jQuery】タイマー処理 ～ setInterval の使用 ～
https://dk521123.hatenablog.com/entry/2012/01/06/014428