setTimeoutコール中に最大コールスタックサイズを超えた

4秒ごとに関数を呼び出して、数値をライブでインクリメントしようとしています。なぜかエラーが出続けています。以下は私のコードです。

<html>
<head>
<title>Recycle Counter</title>
<script type="text/javascript">
    function rand(from, to)
    {
       return Math.floor(Math.random() * (to - from + 1) + from); // Generates random number
    }   

    var num = rand(10000, 100000);

    function getNum() // Gets triggered by page load so innerHTML works
    {
        document.getElementById('counter').innerHTML = num + 7;
        setTimeOut(getNum(), 4000);
    }   
</script>
</head>
<body onload="getNum()">
    <div id="counter">

    </div>
</body>
</html>
ソリューション

getNumの内部では、getNum関数を直接呼び出しているため、スタックを使い果たしてしまいます。関数呼び出しgetNum()を関数参照getNum` に置き換えてください。


function getNum() // Gets triggered by page load so innerHTML works
{
    num += 7;     // Increase and assign variable
    document.getElementById('counter').innerHTML = num;
    setTimeout(getNum, 4000);   // 
解説 (4)

問題は setTimeout の呼び出しが、実行のためのスケジューリングではなく、 getNum を呼び出していることです。 これは、無限の再帰とスタックオーバーフローを引き起こします。 代わりに次のようにしてください。

setTimeout(getNum, 4000);
解説 (1)

setTimeOutsetTimeout` でなければならない。

解説 (0)