如何将 setInterval 和 .on("click") 功能结合在一起？

Question

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

<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

您可以使用立即函数来封装您的变量和函数，避免调用 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>

单击项目符号后，在它稳定下来之前，您可能需要进行一些初始 "jumpiness" 调整。此外，如果需要，您可以使用 jQuery 的 .index() 方法来清理一些代码。

Answer 3

这是一个更新的片段，消除了跳动。基本上问题出在“.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>

如何将 setInterval 和 .on("click") 功能结合在一起？

How to join setInterval and .on("click") function together?

javascript

jquery

html

slider

setinterval