'My code is only running when the Web Dev Tools is opened

I was playing around, and trying to make some motion blur effect with DOM and stuff. I used a dot to get a sight of what was happening and I noticed that my dot only gets the "motion blur" effect when I am in devtools. When I close it, it stops the duplication made by setTimeout and for loop. so I don't know why but for some reason my code is only working when I hit the dev tool. The event listener is still working fine (for getting the mousemove), but my "motion blur" for loop/setTimeout(), is acting weird. I am 90% sure that has something with it, but I don't know.

Here is my JavaScript.

  window.addEventListener('load', function (e) {
  const FRAMES_PER_SECOND = 60;
  let lastRender = 0;
  let samples = 30;
  let delayedPromiseArray = [];
  let autoAlpha = 1 / samples;
  let style = document.createElement('style');
  let nowTime = 0;
  let beforeTime = 0;
  let DIST_OF_MOTIONBLUR = 1.0;
  style.innerHTML =
    `
*{
// cursor:none;
// -webkit-touch-callout: none;
//   -webkit-user-select: none;
//   -khtml-user-select: none;
//   -moz-user-select: none;
//   -ms-user-select: none;
//   user-select: none;
}

html{      
min-height: 100%;
height: 100%;
//cursor: none;
}

body{      
padding: 0px;
margin: 0px;
}

.mouseInjectionWrapper{
inset: 0px;
position: fixed;
width: 100vw;
height: 100vh;
background-color: transparent;
}

.boxdivmouseinjected{
left: 50%;
top: 50%;
border-radius: 50px;
transform: translate(-50%, -50%);
position: absolute;
border-style: solid;
border-width: 2px;
border-color: red;
width: 15px;
height: 15px;
background-color: #FFFFFF;
}
`;
  document.head.appendChild(style);

  let wboxdiv = document.createElement('div');
  wboxdiv.classList.add('mouseInjectionWrapper');
  wboxdiv = document.body.appendChild(wboxdiv);


  for (let i = 0; i < samples; i++) {
    let boxdiv = document.createElement('div');
    boxdiv.classList.add('boxdivmouseinjected');
    wboxdiv.appendChild(boxdiv);
  };

  let box = document.getElementsByClassName('boxdivmouseinjected');

  let iterator = samples + 1;
  for (actualBox of box) {
    iterator--;
    actualBox.style = `
opacity: ${autoAlpha / 2 * iterator};
`;
    delayedPromiseArray[iterator - 1] = new Object();
    delayedPromiseArray[iterator - 1].vel = Number(((iterator - 1) / DIST_OF_MOTIONBLUR).toFixed(4));
  }


  window.addEventListener('mousemove', async function (e) {
    nowTime = Date.now();
    let secSinceLastRender = (nowTime - beforeTime) / 1000;
    if (secSinceLastRender >= (1 / FRAMES_PER_SECOND)) {
      beforeTime = nowTime;
    };

    for (let i = 0; i < box.length; i++) {
          setTimeout(function () {
            box[i].style.left = `${e.clientX + 'px'}`;
            box[i].style.top = `${e.clientY + 'px'}`
          }, delayedPromiseArray[i].vel)
    };
  })
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='main.js' type='application/javascript'></script>
</head>
<body style ='background-color: black;'>
    <div class='container'>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
</body>
</html>

OBS: the code itself is working fine, but only when I have the dev tools opened.

I'm using operaGX by the way.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'My code is only running when the Web Dev Tools is opened

Sources

Related Questions