Question

我有一个非常原始的滑块，使用fadeIn，fadeOut和一些控制子弹。

curve_fit

我想出了如何在点击项目符号（绿色方块）上显示图片，这里的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>

在点击子弹之前有一些初始的“跳跃”，你可能需要调整它。此外，如果需要，您可以使用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”）函数连接在一起？

3 个答案: