1

Estoy intentando colocar un reloj con Javascript y obtengo el error:

Uncaught RangeError: Maximum call stack size exceeded

Se marca en la línea en que se declara la función: function setClock(element_id)


Este es el código simplificado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>

    <style>
        * {
            text-align: center;
        }
        .content {
            margin: 3% 9%;
        }
        .time-box span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="time-box">
            <span>Hora: <span id="actual-time"></span></span>
        </div>
    </div>

    <script>
        function setClock(element_id)
        {
            const date = new Date();

            const hours   = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();

            const now = hours + ':' + minutes + ':' + seconds;
            document.getElementById(element_id).innerText = now;

            setTimeout(setClock(element_id), 1000);
        }

        setClock('actual-time');
    </script>
</body>
</html>


Editado


Otra prueba (sin errores) pero que no actualiza el tiempo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>

    <style>
        * {
            text-align: center;
        }
        .content {
            margin: 3% 9%;
        }
        .time-box span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="time-box">
            <span>Hora: <span id="actual-time"></span></span>
        </div>
    </div>

    <script>
        function setClock(element_id)
        {
            const date = new Date();

            const hours   = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();

            const now = hours + ':' + minutes + ':' + seconds;
            document.getElementById(element_id).innerText = now;
        }

        window.onload = function () {
            setInterval(setClock('actual-time'), 1000);
        }
    </script>
</body>
</html>

Este último caso no funciona si le indico la id del elemento el la llamada a la función.

3 respuestas 3

1

Tú error ocurre porque seteas el timeout dentro de la misma función, creando un bucle infinito.

Mira esto, a modo de prueba, si se llamase a otra función en vez de a setClock ese bucle infinito se rompe y el código funciona (aunque no de forma óptima):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>

  <style>
    {
      text-align: center;
    }
    
    .content {
      margin: 3% 9%;
    }
    
    .time-box span {
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="time-box">
      <span>Hora: <span id="actual-time"></span></span>
    </div>
  </div>

  <script>
    function setClock(element_id) {
      const date = new Date();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();

      const now = hours + ':' + minutes + ':' + seconds;
      document.getElementById(element_id).innerText = now;
      setTimeout(setClock1(element_id), 1000);
    }

    function setClock1(element_id) {
      console.log(element_id);
    }

    var mTimer = setInterval(setClock, 1000, 'actual-time');
  </script>
</body>

</html>


Lo mostrado arriba sirve precisamente para comprender que debes setear el intervalo desde fuera de la función.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>

  <style>
    {
      text-align: center;
    }
    
    .content {
      margin: 3% 9%;
    }
    
    .time-box span {
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="time-box">
      <span>Hora: <span id="actual-time"></span></span>
    </div>
  </div>

  <script>
    function setClock(element_id) {
      const date = new Date();
      /*
        Comento este bloque porque sigue un pequeño truco
        que te puede interesar ...
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      const now = hours + ':' + minutes + ':' + seconds;
      console.log(now);      
      */
      const options = {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
      };
      var mTime = date.toLocaleTimeString("en-GB", options);
      /* TODO: Borrar*/
      console.log(mTime);
      document.getElementById(element_id).innerText = mTime;
    }

    /* 
      Podría convenir guardar una referencia
      por si quieres detenerlo
      Los parámetros se pueden pasar así:
       1. Función
       2. Tiempo
       3. Parámetros adicionales
    */

    var mTimer = setInterval(setClock, 1000, 'actual-time');
  </script>
</body>

</html>

2
  • Supongo que estaba probando a adaptar ejemplos a mi código, la forma de pasar "parámetros adicionales" no la conocía y creo que es lo que mejor me va a servir. El uso de la función toLocaleTimeString() también es interesante. Muchas gracias.
    – Orici
    Commented el 15 mar. 2020 a las 20:32
  • @Orici me alegro de que te haya servido. Saludos.
    – A. Cedano
    Commented el 15 mar. 2020 a las 20:36
1

Contando con el siguiente ejemplo:

function callback(a, b) {
  return function() {
    console.log('sum = ', (a+b));
  }
}

var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

de la página https://www.jstips.co/es_es/javascript/passing-arguments-to-callback-functions


Se puede hacer funcionar el código del segundo ejemplo de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>

    <style>
        * {
            text-align: center;
        }
        .content {
            margin: 3% 9%;
        }
        .time-box span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="time-box">
            <span>Hora: <span id="actual-time"></span></span>
        </div>
    </div>

    <script>
        function setClock(element_id)
        {
            return function () {
                console.log('element_id  -> ' + element_id);

                const date = new Date();

                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();

                const now = hours + ':' + minutes + ':' + seconds;
                document.getElementById(element_id).innerText = now; // no funciona
            }
        }

        window.onload = function () {
            setInterval(setClock('actual-time'), 1000); // no funciona
        }
    </script>
</body>
</html>


Editado: nueva solución. Funciona con funciones flecha (ES6), no con parámetros encadenados, aunque se pueden pasar...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>

    <style>
        * {
            text-align: center;
        }
        .content {
            margin: 3% 9%;
        }
        .time-box span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="time-box">
            <span>Hora: <span id="actual-time"></span></span>
        </div>
        <div class="time-box">
            <span>Hora: <span id="actual-time2"></span></span>
        </div>
    </div>

    <script>
        function getTime() {
            const date = new Date();

            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();

            return hours + ':' + minutes + ':' + seconds;
        }
        function setClock(element_id, now)
        {
            document.getElementById(element_id).innerText = now;
        }

        setInterval(() => setClock('actual-time', getTime()), 1000); // arrow function
        setInterval(setClock, 1000, 'actual-time2', getTime());
    </script>
</body>
</html>

0
0

La solución es usar una función anónima lambda ()=>, no hay que llamar a la función en un setTimeout o un setInterval, solo pueden ir funciones:

()=>setClock(element_id)

Entonces el setTimeout queda así:

setTimeout( ()=>setClock(element_id), 1000 )

Esto es equivalente usando una función normal:

setTimeout( function(){setClock(element_id)} , 1000 )

Código completo:

function setClock(element_id)
{
    const date = new Date();

    const hours   = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    const now = hours + ':' + minutes + ':' + seconds;
    document.getElementById(element_id).innerText = now;

    setTimeout(()=>setClock(element_id), 1000);
}
setClock('actual-time')
* {
    text-align: center;
}
.content {
    margin: 3% 9%;
}
.time-box span {
    display: inline-block;
}
<div class="content">
    <div class="time-box">
        <span>Hora: <span id="actual-time"></span></span>
    </div>
</div>

6
  • Sí, va a ser la definitiva.. parece la mejor opción si hay que pasar varios parámetros.
    – Orici
    Commented el 15 mar. 2020 a las 21:06
  • @Orici Estuve viendo la otra respuesta y al investigar veo que también acepta múltiples parámetros. De hecho no sabía que se podía hacer eso hasta recién. param1, param2, ... Optional. Additional parameters to pass to the function (Not supported in IE9 and earlier)
    – user13558
    Commented el 15 mar. 2020 a las 21:11
  • 2
    @Orici llamándolo con setInterval() también puedes pasar varios parámetros: var mTimer = setInterval(setClock, 1000, 'actual-time', 'param2'); dando por hecho que setClock queda definida así: function setClock (param1, param2) ...
    – A. Cedano
    Commented el 15 mar. 2020 a las 21:12
  • @A.Cedano es una forma de pasar parámetros, pero depende... las funciones flecha son más "universales", también es más cómodo su uso si vienes de programación con ES6. He probado ambas formas e ir encadenando parámetros no me acabo de funcionar con mi último ejemplo... Lo había probado antes metiendo los dos parámetros en uno como array, lo mismo. Añado el código al final mi solución para que lo veas.
    – Orici
    Commented el 15 mar. 2020 a las 21:23
  • @Orici También es posible usar un spread, que son tres puntos al principio (...), declaras un array var parámetros = [parámetro_1, parámetro_2], y luego haces setTimeout(función, 1000, ...parámetros)
    – user13558
    Commented el 15 mar. 2020 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.