如何使用 javascript 在 foreach 中設置一次間隔

Question

當“if”語句為真時，我需要為數組內的每個 slider 元素設置一次間隔，但每次“if”語句為真時我的代碼設置無限間隔。 這是我的js代碼：

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

由於您在事件偵聽器中調用 checkIfIntoView function，因此事件偵聽器將在每次發生車輪事件時都認為 function 發生。 因此，如果您想在車輪事件觸發后調用 checkIfIntoView function，請使用 Boolean 變量。

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

我不確定你在問什么......但是如果你想滾動到slider.getBoundingClientRect().top >= window.innerHeight那么你可以這樣寫你的 ZC1C425268E68385D1AB5074C17A9

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); });

這樣，在滿足條件后，間隔將被清除。 請記住setInterval將繼續運行，直到通過clearInterval清除它

Answer 3

假設這些都是滑塊數組中的所有元素，也許您正在尋找類似的東西：

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');
      }
    }
  });
}

請注意，您始終可以離開window. 關閉window的任何屬性。