Maximum Call Stack Size Exceeded During a setTimeout Call

I’m trying to call my function every 4 seconds so it will increment a number live. For some reason I keep getting errors. Here’s my code:

<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);
<body onload="getNum()">
    <div id="counter">


Inside getNum, you’re directly invoking the getNum function, causing the stack to exhaust. Replace the function call getNum() with the function reference 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);   // <-- The correct way

Link to documentation of setTimeout.

The problem is your call to setTimeout is invoking getNum instead of scheduling it for execution. This leads to infinite recursion and a stack overflow. Try the following instead

setTimeout(getNum, 4000);

setTimeOut should be setTimeout

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Ignore camelcase variable in JSHint

Similar Posts