0

currently I am working on JS animation for MFD tablet. Right now I am recieving perfomance issues. I write small script for animation, and it runs ok. But as soon as I touch the screen its starts lsgging. You can see the whole code here

<html>

  <head>
    <title>JS SpeedTest</title>
  </head>

  <style>
    .row, .row1 {
  display: flex;
}

.row1 {
  margin-top: 20px;
}

.block {
  background: black;
  width: 30%;
  height: 50px;
  margin: 5px;
}
  </style>

  <body>
    <div class="row">
      <div class="block" style="background: red;"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div class="row1">
      <div class="block" style="background: red;"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </body>
  
  <script>
    (() => {
  function* step() {
    let back = false;
    let n = 0;

    while (true) {
      if (n >= 200) {
        back = true;
      }

      if (n <= -200) {
        back = false;
      }

      yield  back ? n-- : n++
    }
  }

  Array.prototype.forEach.call(
    document.getElementsByClassName('row'),
    function(el) {
        const nextStep = step();
      
      setInterval(
        () => {
          Array.prototype.forEach.call(
            el.getElementsByClassName('block'),
            (b, index) => {
              b.style.transform = `translate(${nextStep.next().value}px, 0px)`;
            });
        },
        20
      );
    });

  Array.prototype.forEach.call(
    document.getElementsByClassName('row1'),
    function(el) {
        const nextStep = step();
    
      setInterval(
        () => {
          Array.prototype.forEach.call(
            el.getElementsByClassName('block'),
            (b, index) => {
              const val = nextStep.next().value;

              b.style.transform = `translate(${val}px, 0px) scale(${val / 100})`;
            });
        },
        20
      );
    });
})();
  </script>

</html>

also you can see the behaviour on the video https://drive.google.com/file/d/1DUrc1N9ZvYxOsnUgnEVQKh7ZRFVrtTPu/view?usp=sharing

any thoughts on how I can improve performance ?

Alexander Onishchuk
  • 1
  • 1
  • 1
    From your code I don't see any reason for that behavior. It might be a hardware issue, or some other software that listen for any and all touch event globally. – Seblor Sep 17 '21 at 10:52
  • [Good to know about getElementsBy*](https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname/66480319#66480319). – Teemu Sep 17 '21 at 11:00

0 Answers0