再帰呼び出しになるかどうか
次のエラーで少しハマったので調べました。
Uncaught (in promise) RangeError: Maximum call stack size exceeded
どうやら再帰呼び出しによるスタックオーバーフローのようです。
実行していたコードは以下の通り。
let drawPattern = true; function messageDraw(player_name) { document.getElementById("log_name").textContent = "Name : " + player_name if (drawPattern) { document.getElementById("message").textContent = "( ・ω・)"; } else { document.getElementById("message").textContent = " (・ω・ )"; } drawPattern = !drawPattern; setTimeout(messageDraw(player_name), 500); }
なるほど、messageDraw
の呼び出しが問題のようです。
このコードを次のように修正するとスタックオーバーフローは発生しなくなりました。
let drawPattern = true; let player_name = "hoge" function messageDraw() { document.getElementById("log_name").textContent = "Name : " + player_name if (drawPattern) { document.getElementById("message").textContent = "( ・ω・)"; } else { document.getElementById("message").textContent = " (・ω・ )"; } drawPattern = !drawPattern; setTimeout(messageDraw, 500); }
ふむふむ、なぜ?
関数を引数に与える形式で記述すると再帰呼び出しでは無くなるようですが、理屈が分からない。
おそらくスコープ内の変数が無いので、setTimeout()
のタイムアウトでmessageDraw()
を呼び出した時点で前のスタックが解消されるのだと想像します。