Javascript clock / timer breaks

Question

I am planning to build multiple timer. I started by building a simple clock using the following code.

the issue is, the clock will run for a few minute and the website will break, I think it's due to running out of memory.

when I console.log the output. It appears the command is ran more than once per second. The counter for the console.log line will say 2, 4, 8, 16, 32, 64 etc etc. quickly doubling into some astronomical number. and the site will become non responsive in a few minute.

Is it an efficiency issue with the code? Or it is just not feasible to use java script to up date something every second. because I am planning on making multiple timer on the same page. (maybe around 5-10)

I tried this on google chrome.

updateTime();
    function updateTime() {
        var d = new Date;
        var hours = d.getHours();
        var mins = d.getMinutes();
        var secs = d.getSeconds();
        var ampm = 'AM';
        if (hours >= 12) {
            ampm = 'PM';
        }
        if (hours > 12) {
            hours = hours - 12;
        }
        formatted_time = hours + ':' + mins + ':' + secs + ampm;
        //console.log(formatted_time);
        $("#currenttime").html(formatted_time);
        window.setInterval(updateTime, 1000);
    }

You're setting an interval, that means it will do it repeatedly, and you make a new interval every loop, before long you've got millions of intervals all running, change that to setTimeout. — Nick is tired
– Nick is tired, Commented Nov 4, 2016 at 21:53
Possible duplicate of Why is setInterval making infinite loops — Heretic Monkey
– Heretic Monkey, Commented Nov 4, 2016 at 22:00

Kostas Pelelis · Accepted Answer · 2016-11-04 21:54:29Z

3

You're probably running out of memory because each new setInterval call starts a periodic function.

So each time updateTime is called, a new one is started. That means 1 call, 2 calls, 4 ... 2^n. (after 60 seconds you will have 2^60 calls. This is a 18 digit decimal number).Calls in just n seconds. You probably meant to use setTimeout

answered Nov 4, 2016 at 21:54

Kostas Pelelis

1,3509 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed-Yousef · Accepted Answer · 2016-11-04 22:18:01Z

Set a setInterval inside the function that means setInterval will run in each time you call a function And while you call the function with window.setInterval(updateTime, 1000); it will not call just the part of update time it will run the setInterval part as well again and again .. so you can use it like...

function updateTime() {
    var updateIt = function(){
       var d = new Date;
       var hours = d.getHours();
       var mins = d.getMinutes();
       var secs = d.getSeconds();
       var ampm = 'AM';
       if (hours >= 12) {
          ampm = 'PM';
       }
       if (hours > 12) {
         hours = hours - 12;
       }
       formatted_time = hours + ':' + mins + ':' + secs + ampm;
       console.log(formatted_time);
       $("#currenttime").html(formatted_time);
  }
  setInterval(updateIt, 1000);
}
updateTime();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currenttime"></div>

Razvan Alex · Accepted Answer · 2016-11-04 21:56:07Z

You're right, running out of memory will cause your browser to crush. Try this and see if it stops crashing:

<!DOCTYPE html>
<html>
    <head>
        <title>The Time</title>
        <script type="text/javascript">
            // This function gets the current time and injects it into the DOM
            function updateClock() {
                // Gets the current time
                var now = new Date();

                // Get the hours, minutes and seconds from the current time
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();

                // Format hours, minutes and seconds
                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }

                // Gets the element we want to inject the clock into
                var elem = document.getElementById('clock');

                // Sets the elements inner HTML value to our clock data
                elem.innerHTML = hours + ':' + minutes + ':' + seconds;
            }
        </script>
    </head>
    <!--
        This is the key to making the clock function.
        When the page loads, it calls the javascript function "setInterval()",
        which will call our function "updateClock()" once every 200 milliseconds.
    -->
    <body onload="setInterval('updateClock()', 200);">
        <!-- This is the container for our clock, it can be any HTML element. -->
        <h1 id="clock"></h1>
    </body>
</html>

if it does, take a look here http://momentjs.com/

Why not onload="setInterval(updateClock, 200)"? Then you don't need to be interpreting a string as code...

Collectives™ on Stack Overflow

Javascript clock / timer breaks

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related