On screen update javascript

February 17, 2022

I want to have a function that runs on screen update in javascript a while (true) {do something} freezes the entire screen is there a way to do this kind of like this:

<!DOCTYPE html>
<html>
  <body>
    <p id="label">Not Working</p>
    <script>
      var l = document.getElementById("label");
      window.addEventListener("update",function(){
        l.innerHTML = "Is Working";
      });
    </script>
  </body>
</html>

It does not work so is there a way to do this easily???

>Solution :

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>