Slow and lag javascript

Question

I have a simple javascript program.

You can move a square in it.

But after a while, it start slowing and lagging.

What's the problem? Why is it slow?

Is this too much use of ram?

I use Javascript canvas and setInterval. Or is it really out of date?

aaaaaaaaaaaaaaaaaa

Sorry, I can not speak English very well.

<body onload="Start()">
  <script>

    function Start() {
      myAvatar = new component("black", 30, 30, 50, 50);
      goldMine = new component("yellow", 30, 30, 200, 100),

        Field.start();
    }

    var Field = {

      field: document.createElement("canvas"),

      start: function () {
        this.field.height = 800;
        this.field.width = 800;
        this.context = this.field.getContext("2d");
        document.body.insertBefore(this.field, document.body.childNodes[0]);
        this.interval = setInterval(fieldUpdate, 10);

        window.addEventListener('keydown', function (e) {
          Field.keys = Field.keys || [];
          Field.keys[e.keyCode] = (e.type == "keydown");


        })

        /////KEY UP/////
        window.addEventListener('keyup', function (e) {
          Field.keys[e.keyCode] = (e.type == "keydown");

        })
      },

      clear: function () {
        this.context.clearRect(0, 0, this.field.width, this.field.height);
      }
    }

    function component(color, width, height, x, y) {
      this.color = color;
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y;

      this.componentUpdate = function () {
        ctx = Field.context;
        ctx.save();
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

    function fieldUpdate() {

      Field.clear();

      myAvatar.componentUpdate();
      goldMine.componentUpdate();

      if (Field.keys && Field.keys[37]) {
        myAvatar.x--;
        var origCoord = [myAvatar.x, myAvatar.y];

      }

      if (Field.keys && Field.keys[38]) {
        myAvatar.y--;
        var origCoord = [myAvatar.x, myAvatar.y];

      }
      if (Field.keys && Field.keys[39]) {
        myAvatar.x++;
        var origCoord = [myAvatar.x, myAvatar.y];


      }

      if (Field.keys && Field.keys[40]) {
        myAvatar.y++;
        var origCoord = [myAvatar.x, myAvatar.y];
      }
    }
  </script>
</body>

Use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) instead. — Sebastian Simon, Jul 12 '18 at 14:07
I tried this code and didn't experience any lag. Lots of window jumping, but lag... no. Here, see for yourself http://jsfiddle.net/2zdwf5h3/1/ — Nelson Teixeira, Jul 12 '18 at 14:10
You have a memory leak: you do call ctx.save() but never ctx.restore(). This means that the browser will stack **all** the settable properties of your context every 10ms, without being ever able to release it. You simply don't need this method anyway. — Kaiido, Jul 12 '18 at 14:52

Slow and lag javascript

0 Answers0