首页 > 解决方案 > 检查 setInterval 内的条件时,clearInterval 不起作用

问题描述

实际上,我正在使用 vanilla javascript 设计一个自动播放滑块。所以有两个功能,一个是播放正向滑块,一个是反向播放。当我在前向滑块的最后一项上时,我想清除间隔并启动反向滑块,反之亦然,当我在反向滑块的最后一项上时,我想清除间隔并启动前向滑块。但是间隔没有被清除,一旦切换到反向滑块并继续运行两个间隔

function sliderForwardAutoplay(){
  var Fid = setInterval(()=>{
      var currentSlider = document.querySelector('.current-slider');
      if(parseInt(currentSlider.dataset.num)===2){
          clearInterval(Fid);
          sliderReverseAutoplay();
      }
      // alert(currentSlider.dataset.num+1);
      // currentSlider.classList.add('swipe-left');
      getSliderLayer(parseInt(currentSlider.dataset.num)+1).classList.add('swipe','current-slider');
      setInterval(()=>{
          getImgLayer(parseInt(currentSlider.dataset.num)+1).classList.add('left-0');
      },500);
      currentSlider.classList.remove('current-slider');
  },5000);
}

function sliderReverseAutoplay(){
  var Rid = setInterval(()=>{
      var currentSlider = document.querySelector('.current-slider');
      if(parseInt(currentSlider.dataset.num)===0){
          clearInterval(Rid);
          sliderForwardAutoplay();
      }
      // alert(currentSlider.dataset.num+1);
      // currentSlider.classList.add('swipe-left');
      getSliderLayer(parseInt(currentSlider.dataset.num)).classList.add('swipe-right');
      getSliderLayer(parseInt(currentSlider.dataset.num)-1).classList.add('current-slider');        currentSlider.classList.remove('current-slider');
      
  },5000);
}

标签: javascript

解决方案


推荐阅读