0

When the page loads, the script for the background stripes runs fine.. the stripes appear then begin to fade out after a certain amount of stripes is in the array.

As long as the browser tab is selected(focus) the script runs as expected. However, If you open a New browser tab and select the new tab. The script for the stripes continues to run in the background on the original tab but somehow ignores the condition and the stripes pile up to infinity. When switching back to the original tab you then see the ugly pile up.

Why is this happening?

https://codepen.io/trentHarlem/full/yLVvvav

const addButton = document.getElementById('add-stripe');
const guitar = document.getElementById('guitar');

function addStripe() {
  let qsaSpan = document.querySelectorAll('span');
  let stripe = document.createElement('span');
  let stripeArray = Array.from(qsaSpan);

    let color = 'white';
    let z = Math.floor(Math.random() * 2);
    if (Math.random() > 0.65) {
      color = 'black';
    }
    let angle = Math.floor(Math.random() * 360);
    let x = Math.floor(Math.random() * 30) - 15;
    let y = Math.floor(Math.random() * 30) - 15;
    let width = Math.floor(Math.random() * 6) + 1;
    // console.log('click', color, angle, x, y, width);

    stripe.style.backgroundColor = `${color}`;
    stripe.style.zIndex = `${z}`;
    stripe.style.transform += `translateX(${x}%)`;
    stripe.style.transform += `translateY(${y}%)`;
    stripe.style.transform += `rotate(${angle}deg)`;
    stripe.style.height = `${width}%`;
    guitar.insertAdjacentElement('beforeend', stripe);
  // console.log('length', stripeArray.length);
  

  function parRemove() {
    stripeArray[0].remove()
    stripeArray[0].removeEventListener('transitionend', parRemove)
    stripeArray[0].removeEventListener('webkitTransitionEnd', parRemove)
  }

  if (stripeArray.length > 5) {
    stripeArray[0].classList.add('fall');
    stripeArray[0].classList.add('fade');
//    console.log(' stripeArray[0].classList', stripeArray[0].classList.value);

    stripeArray[0].addEventListener('transitionend', parRemove, false);
    stripeArray[0].addEventListener('webkitTransitionEnd', parRemove, false);
  }
    else if (stripeArray.length < 5) {
  
  }
}
const stripeTimer = setInterval(addStripe, 2000);
trentHarlem
  • 99
  • 10
  • It's working for me. – Pablo Darde Feb 26 '21 at 20:48
  • 1
    [browsers throttle timers in background tabs.](https://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs) – Jonas Wilms Feb 26 '21 at 20:51
  • @JonasWilms Thanks for the heads up. So to avoid this, would you recommend I rewrite the script to use requestAnimationFrame()? – trentHarlem Feb 26 '21 at 21:28
  • That will have the same limitations I guess. Just make your script resistent to running less often than every two seconds. Not quite sure how though, I don't quite get how it works. – Jonas Wilms Feb 27 '21 at 00:08
  • What's the reason to attach `stripeArray[0].addEventListener('transitionend', parRemove, false);` only to the first element in the array? and also only after 5 other elements were inserted? I assume the problem is that transitionend triggers long before the handler is attached (when the timer is throttled) – Jonas Wilms Feb 27 '21 at 00:13
  • When the 6th element appears the 0 element fades out so there should only ever be 6 on the screen with one fading in and one fading out – trentHarlem Feb 27 '21 at 12:51
  • im looking into this RN https://stackoverflow.com/questions/30008631/javascript-how-check-if-browser-got-focus – trentHarlem Feb 27 '21 at 13:22

0 Answers0