Loop Slowing Down Overtime and Eventually Crashing in Javascipt Running in HTML

Question

I am really new to Javascipt and HTML and I just want to create an updating display of a number. I am hosting the website/running this code with Weebly currently, but I hope to change this as I get better with these languages. The issue I am having currently is that when I run the code directly on my computer it seems to run fine, except the code slows down over time. When I run it in Weebly, on my computer it forces the word milliseconds to a smaller font and otherwise works properly. On an Iphone in safari, I see this (The reason I am changing the color to red is because I eventually want to set it to black because on the IPhone it shows up as gray and I don't want that) Eventually the red text just disappears and the gray text does not update.

Here is the relevant part of the code

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    rightnow2 = String(1578135600000 - currdate.getTime())
    rightnow2 = rightnow2.fontcolor("red")
    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow2)
    rightnow = 1578135600000 - currdate.getTime()

   // document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

   },1);

I also have a version of the code that works perfect on the computer but on Iphone, the number of milliseconds is gray and does not update.

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

  },1);

Either way, I just want something that will display black text on both an Iphone (on Safari) and on Chrome that will continuously update the number of milliseconds.

Running a function every millisecond is going to chew up browser memory pretty fast. Redraws are also expensive which will occur every time you update the DOM. Try your code with a more sensible period, say 100ms, and debug that. Then reduce the period until you start getting issues. Also see: https://stackoverflow.com/questions/9647215/what-is-minimum-millisecond-value-of-settimeout — Jon P, Dec 04 '19 at 00:44
Updating the DOM that quickly is counterintuitive and costly. Have you tried changing millisecond amount to something higher, say 16ms? This will give you 60FPS updates, which is the highest framerate the human eye can perceive. You are going for 16x that amount bud :). — adamz4008, Dec 04 '19 at 00:49
I have slowed it down and actually in all the versions I have uploaded to Weebly I have used intervals such as 337ms (just to make the last digit keep changing). I don't think the slowdown error is mainly caused by this update rate, as it only occurs to some versions of the code, even at 1ms — OwenBall, Dec 04 '19 at 00:53
See if this is Weebly specific. Try uploading your javascript to somewhere like jsFiddle or Codepen, and see if you get the same issues there. — Jon P, Dec 04 '19 at 01:08
What about making a regular ol' styled element instead of `fontcolor`? From MDN: String.prototype.fontcolor() Deprecated This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. — adamz4008, Dec 04 '19 at 01:14
I ran the code using Editey on my phone and computer and got the same issue that I got on Weebly. The red number is initially updating then quickly disappears. Here are two screenshots of the program running: https://docs.google.com/document/d/1Lyj7goPWieFhywTmaIZxBzW3zdxTgj_d5ClfBQby824/edit?usp=sharing — OwenBall, Dec 04 '19 at 01:21

Jon P · Accepted Answer · 2019-12-04T04:30:56.963

3

Don't use document.write it is very rarely best practice. Set up some sensible HTML on your page and only update the element that needs it. Finally use a sensible number for the refresh.

/* javascript to manipulate the DOM */
var target = 1578135600000
//Get the element that will hold the milliseconds
var countdownElement = document.getElementById("invCountdown");

  setInterval(function(){
    //Date Stuff
    currdate = new Date();    
    rightnow2 = String(target - currdate.getTime());
    //Set the style of the millisecond element
    countdownElement.style.color = "red";
    //Update the content of the millisecond element.
    countdownElement.innerHTML = rightnow2;   
   },16);

/*CSS to style the div with class inv*/
.inv {font-size:30px; color:#000;}

<!-- HTML -->
<!-- Generic block element to hold our content, with a class so we can style it -->
<div class="inv">
<!-- Generic inline element with an id so we can manipulate it easily with javascript -->
  (<span id="invCountdown">1578135600000</span>) milliseconds<br> until Columbia Invy 
</div>

edited Dec 04 '19 at 04:30

answered Dec 04 '19 at 01:28

Jon P

19,442
8
49
72

This seems like it will work perfectly from what I have seen in the "Run code snippet," but since I am really new to all this, I don't know how to use or format .in or
and don't know what to search to find info on these. Currently, my entire document looks like this: https://docs.google.com/document/d/1NJHXvCxomMRK6nzUx0OjfQShHbIZRkfg_c9HVIfLZ2s/edit?usp=sharing I don't know what to do to make .inv actually modify the text rather than just be displayed
– OwenBall Dec 04 '19 at 02:01
`.inv` is a CSS class so find some CSS tutorials. CSS is not used to modify content but to style it. Javascript is used to modify content. CSS is what you should use to style HTML document. Roughly, HTML describes a document. The browser uses this to create a Document Object Model (DOM). CSS is used by the browser to style the DOM and javascript is used by the browser to manipulate the DOM – Jon P Dec 04 '19 at 04:04
Thank you so much. I don't completely understand all the element parts but I was able to figure out how the classes and formatting works. I tried it in Weebly and it seems to work great. – OwenBall Dec 04 '19 at 04:38

Loop Slowing Down Overtime and Eventually Crashing in Javascipt Running in HTML

1 Answers1