How to setInterval once inside foreach using javascript

Question

I need to set interval once for each slider element inside array when "if" statement is true but my code sets unlimited interval every time "if" statement is true. it is my js code:

const sliders = [realestateSlider,carsSlider,spectechnicSlider,motorcyclesSlider,partsSlider,beautySlider,clothesSlider,bestsellersSlider,topproductsSlider,salesSlider];

function checkIfIntoView(sliders){
    sliders.forEach(function(slider,index){
        if(slider.getBoundingClientRect().top <= window.innerHeight || document.documentElement.innerHeight){
            
           setInterval(function(){slider.scrollLeft += scrollWidth;},1000);
           
        }
    });
}

window.addEventListener('wheel',function(event){ checkIfIntoView(sliders); });

Answer 1

Since you call the checkIfIntoView function in event listener, event listner will tiger that function each and every time a on wheel event occur. So if you want to call the checkIfIntoView function once the wheel event triggered, use a Boolean variable.

let ran = false;
function checkIfIntoView(sliders){
   if (!ran) {
       ran = true
       sliders.forEach(function(slider,index){
           if(slider.getBoundingClientRect().top <= window.innerHeight || document.documentElement.innerHeight){
              setInterval(function(){slider.scrollLeft += scrollWidth;},1000);
           
           }
       });
   }
}

Answer 2

I'm not sure exactly what you are asking... But if you want to scroll until slider.getBoundingClientRect().top >= window.innerHeight then you could write your function like this:

const sliders = [realestateSlider,carsSlider,spectechnicSlider,motorcyclesSlider,partsSlider,beautySlider,clothesSlider,bestsellersSlider,topproductsSlider,salesSlider];

function checkIfIntoView(sliders){
  sliders.forEach(function(slider,index){
    let interval = setInterval(function(slider){
      if (slider.getBoundingClientRect().top <= window.innerHeight || document.documentElement.innerHeight) {
        slider.scrollLeft += scrollWidth;
      } else {
        clearInterval(interval);
      }
  }, 1000);
}

window.addEventListener('wheel',function(event){ checkIfIntoView(sliders); });

That way the interval will be cleared after the criteria is met. Keep in mind setInterval will continue to run until it is cleared via clearInterval

Answer 3

Assuming that those are all Elements in the sliders Array, maybe you're looking to do something like:

const sliders = [realestateSlider, carsSlider, spectechnicSlider, motorcyclesSlider, partsSlider, beautySlider, clothesSlider, bestsellersSlider, topproductsSlider, salesSlider];
onscroll = e=>{
  requestAnimationFrame(()=>{
    let b, t, l;
    for(let n of sliders){ // n is each node
      b = n.getBoundingClientRect(); t = b.top; l = b.left;
      if(t+b.height > -1 && t <= innerHeight && l+b.width > -1 && l <= innerWidth){
        console.log('in view');
      }
      else{
        console.log('not in view');
      }
    }
  });
}

Note that you can always leave window. off of any property of window .