How do I set a function to run every screen update in javascript?

Question

I want to have a function that runs every screen update in javascript a while (true) loop freezes the entire screen:

<!DOCTYPE html>
<html>
  <body>
    <p id="label">Something should display</p>
    <script>
      var l = document.getElementById("label");
      while (true){
        l.innerHTML = "Something";
      }
    </script>
  </body>
</html>

So is there a way to kind of do this???

There's no `update` event, what's supposed to trigger the function? — Barmar, Feb 17 '22 at 21:22
What specifically do you mean by "on screen update"? Are you looking for [Mutation Observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)? Something else? — David, Feb 17 '22 at 21:23
Do you mean literally a `while (true) { ... } ` loop? If so, where is it in your example? — kmoser, Feb 17 '22 at 21:26
Are you trying to run something periodically, as in, every 10ms? Or are you trying to run something like an animation and tie it to the screen's redraw loop? — user229044, Feb 17 '22 at 21:38
Then you don't want `requestAnimationFrame`. You want `setInterval`. — user229044, Feb 17 '22 at 22:30
@meager Ok thanks, also I do not wan't my account banned from asking questions I got a warning about it from downvotes this is my second question to. — AverseMoon, Feb 17 '22 at 22:33

score 0 · Accepted Answer · answered Feb 17 '22 at 21:25

You can have a function run on the next frame with window.requestAnimationFrame(callback)

<!DOCTYPE html>
<html>

<body>
  <p id="label">Loading</p>
  <script>
    var l = document.getElementById("label");

    function update() {
      l.innerHTML = Date.now();
      window.requestAnimationFrame(update);
    }
    update();
  </script>
</body>

</html>

How do I set a function to run every screen update in javascript?

1 Answers1