javascript imageSwap问题

Question

如果我多次回调主函数，我的setInteval()函数会继续重启。

我尝试过很多技巧，但无法获得正确的实现。

想法：

关于每个<div>都有自己的id及其子图片。

我希望每隔1秒交换一次图像，然后在3秒内交换另一个图像。

(function(){
  var count = 0;

  function swapImages(id,speed){
    var elChilds = $(id).children().length;

    setInterval(function(){
      count++;
      console.log(count);
      if(count >= elChilds){
        count= 0;
      }
    }, speed);

    if($(id).children().hasClass('image'+count)){
      $(id).children().removeClass('active');
      $('.absolute-image.image'+count).addClass('active');
    }

  }

  swapImages('#swap0', 1000);
  swapImages('#swap1', 5000);
  swapImages('#swap2', 2000);

})();
 <div class="col-md-3 main-content-left" id="swap0">
      <a href="" class="col-md-12 absolute-image image2">
        <img src="images/gal3.jpg" alt="">
      </a>
       <a href="" class="col-md-12 absolute-image image1">
        <img src="images/gal2.jpg" alt="">
      </a>
       <a href="" class="col-md-12 absolute-image image0 active">
        <img src="images/gal1.jpg" alt="">
      </a>
    </div>


        <div class="col-md-5" id="swap1">
          <a href="" class="col-md-12 absolute-image image2">
            <img src="images/gal1.jpg" alt="">
          </a>
          <a href="" class="col-md-12 absolute-image image1">
            <img src="images/gal2.jpg" alt="">
          </a>
          <a href="" class="col-md-12 absolute-image image0 active">
            <img src="images/gal3.jpg" alt="">
          </a>
        </div>
        <div class="col-md-7" id="swap2">
          <a href="" class="col-md-12 absolute-image image2">
            <img src="images/gal3.jpg" alt="">
          </a>
          <a href="" class="col-md-12 absolute-image image1">
            <img src="images/gal2.jpg" alt="">
          </a>
          <a href="" class="col-md-12 absolute-image image0 active">
            <img src="images/gal3.jpg" alt="">
          </a>
        </div>

感谢。

Answer 1

我的理解是你在呼唤主力 函数不止一次，但你的setInterval正在重置

如果我的理解是正确的，请将你的setInterval保存在a if condition并为会话或本地存储设置一个布尔值 如果条件

每当您想要重置setInterval时设置布尔值

更新了代码

(function() {
var count = 0;

function swapImages(id, speed) {
    var elChilds = $(id).children().length;

    if (sessionStorage.getItem('flagSetInterval') == null) {
        setInterval(function() {
            count++;
            sessionStorage.setItem('flagSetInterval', 'false');
            console.log(count);
            if (count >= elChilds) {
                count = 0;
            }
        }, speed);
    }

    if ($(id).children().hasClass('image' + count)) {
        $(id).children().removeClass('active');
        $('.absolute-image.image' + count).addClass('active');
    }

}

swapImages('#swap0', 1000);
swapImages('#swap1', 5000);
swapImages('#swap2', 2000);
})();