如何将 setInterval 和 .on("click") 函数连接在一起？

Question

我有一个非常原始的滑块，使用淡入淡出、淡出淡出和一些控制项目符号。

https://jsfiddle.net/c2dsnr8v/1/

<div class="view">
  <ul class="list">
    <li class="frst">
      <img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
    </li>
    <li class="scnd">
      <img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
    </li>
    <li class="thrd">
      <img src="http://randomacts.channel4.com/images/fb_logo.gif" />
    </li>
    <li class="frth">
      <img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
    </li>
  </ul>
  <div class="ctrl">
    <div class="bullet one"></div>
    <div class="bullet two"></div>
    <div class="bullet three"></div>
    <div class="bullet four"></div>
  </div>
</div>

$(".list li:gt(0)").hide();

var int = setInterval(function(){
$('.list > :first-child')
.fadeOut()
.next()
.fadeIn()
.end()
.appendTo('.list');} ,3000);

$(".bullet").on("click", function(){
  clearInterval(int);
  $(".list li").fadeOut();

  var $this = $(this);

  if($this.hasClass("one")){
    $(".list li.frst").fadeIn();
  }else if($this.hasClass("two")){
    $(".list li.scnd").fadeIn();
  }else if($this.hasClass("three")){
    $(".list li.thrd").fadeIn();
  }else if($this.hasClass("four")){
    $(".list li.frth").fadeIn();
  }
})

我想出了如何让图片在点击项目符号（绿色方块）时出现，这里的 setInterval 函数已经足够清晰了。但是当我尝试将这些机制结合在一起时，我发现我只能通过单击清除 setInterval。所以一旦我使用了子弹，自动旋转就不再起作用了。

有什么方法可以使用此代码将两者结合在一起吗？比如我点击了一颗子弹，图片静止了5秒，然后以同样的速度继续旋转？

我尝试在每次单击项目符号后包含一个新的 setInterval，但失败了。

Answer 1

我认为您正在寻找的是 setTimeout。 setTimeout 将在设定的毫秒数后执行一次函数。所以在这个例子中你可以这样做：

//clear timeoutid incase you click a lot
clearTimeout(timeoutid);
timeoutid = setTimeout(function(){ 
  int = setInterval(function(){
    //List stuff
  },2000);
},3000);

所以在这种情况下，下一次淡入淡出不会在点击后 5 秒内发生，但旋转会以 2 秒的间隔继续。

示例 JSFiddle：
https://jsfiddle.net/u6sdb40j/1/

Answer 2

这是一个更新的 sn-p，它消除了跳跃。基本上问题出在“.appendTo('.list');”中，它对列表项进行了重新排序，并且一旦单击项目符号就很难继续旋转。代码进行了重大更改以解决此问题，但它应该更有效，因为 dom 不会每次都重新排序。此外，我删除了一堆不必要的类，现在使用 .index() 在项目符号和列表项之间进行协调，如前所述。

(function() {
  var start = function() {
      var active = $('.active'),
        next = active
        .removeClass('active')
        .fadeOut()
        .next();
      if (!next.length) {
        next = $('ul li:first-child');
      }
      next
        .addClass('active')
        .fadeIn()
        .end();
    },
    go = function() {
      return setInterval(start, 2000);
    },
    int = go();
  $(".bullet").on("click", function() {
    var currentIndex = $('div.bullet').index(this),
      currentLi = $('ul li').eq(currentIndex);
    clearInterval(int);
    $('.active').removeClass('active').fadeOut();
    currentLi.addClass('active').fadeIn();
    int = go();
  })
}());

.view {
  margin: 100px auto 0;
  width: 200px;
  position: relative;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
ul li {
  position: absolute;
  top: 0;
  left: 0;
}
.ctrl {
  bottom: -215px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
}
.bullet {
  background-color: green;
  height: 10px;
  width: 10px;
  cursor: pointer;
}

<div class="view">
  <ul>
    <li class="active">
      <img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
    </li>
    <li style="display:none;">
      <img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
    </li>
    <li style="display:none;">
      <img src="http://randomacts.channel4.com/images/fb_logo.gif" />
    </li>
    <li style="display:none;">
      <img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
    </li>
  </ul>
  <div class="ctrl">
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 3

您可以使用立即函数来封装您的变量和函数，并避免两次调用 setInterval：

(function() {
  $(".list li:gt(0)").hide();
  var start = function() {
      $('.list > :first-child')
        .fadeOut()
        .next()
        .fadeIn()
        .end()
        .appendTo('.list');
    },
    go = function(elem) {
      return setInterval(start, 2000);
    },
    int = go();
  $(".bullet").on("click", function() {
    clearInterval(int);
    $(".list li").fadeOut();
    var $this = $(this);
    if ($this.hasClass("one")) {
      $(".list li.frst").show();
    } else if ($this.hasClass("two")) {
      $(".list li.scnd").show();
    } else if ($this.hasClass("three")) {
      $(".list li.thrd").show();
    } else if ($this.hasClass("four")) {
      $(".list li.frth").show();
    };
    setTimeout(function() {
      int = go();
    }, 2000);
  })
}());

(function() {
  $(".list li:gt(0)").hide();
  var start = function() {
      $('.list > :first-child')
        .fadeOut()
        .next()
        .fadeIn()
        .end()
        .appendTo('.list');
    },
    go = function(elem) {
      return setInterval(start, 2000);
    },
    int = go();
  $(".bullet").on("click", function() {
    clearInterval(int);
    $(".list li").fadeOut();
    var $this = $(this);
    if ($this.hasClass("one")) {
      $(".list li.frst").show();
    } else if ($this.hasClass("two")) {
      $(".list li.scnd").show();
    } else if ($this.hasClass("three")) {
      $(".list li.thrd").show();
    } else if ($this.hasClass("four")) {
      $(".list li.frth").show();
    };
    setTimeout(function() {
      int = go();
    }, 2000);
  })
}());

.view {
  margin: 100px auto 0;
  width: 200px;
  position: relative;
}
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.list li {
  position: absolute;
  top: 0;
  left: 0;
}
.ctrl {
  bottom: -215px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
}
.bullet {
  background-color: green;
  height: 10px;
  width: 10px;
  cursor: pointer;
}

<div class="view">
  <ul class="list">
    <li class="frst">
      <img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
    </li>
    <li class="scnd">
      <img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
    </li>
    <li class="thrd">
      <img src="http://randomacts.channel4.com/images/fb_logo.gif" />
    </li>
    <li class="frth">
      <img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
    </li>
  </ul>
  <div class="ctrl">
    <div class="bullet one"></div>
    <div class="bullet two"></div>
    <div class="bullet three"></div>
    <div class="bullet four"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

在单击项目符号后会出现一些初始“跳跃”，然后您可能需要对其进行调整。此外，如果需要，您还可以使用 jQuery 的 .index() 方法清理一些代码。