Javascript 如何将setInterval和.on（“单击”）函数连接在一起？

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

$（“.list li:gt（0）”）.hide（）；
var int=setInterval（函数（）{
$（“.list>：第一个子项”）
.fadeOut（）
.next（）
.fadeIn（）
(完)
.appendTo（“.list”）；}，3000）；
$（.bullet”）。在（“单击”，函数（）上{
清除间隔（int）；
$（“.list li”）.fadeOut（）；
var$this=$（this）；
如果（$this.hasClass（“一”））{
$（“.list li.frst”）.fadeIn（）；
}else if（$this.hasClass（“二”））{
$（“.list li.scnd”）.fadeIn（）；
}else if（$this.hasClass（“三”））{
$（“.list li.thrd”）.fadeIn（）；
}else if（$this.hasClass（“四”））{
$（“.list li.frth”）.fadeIn（）；
}
})

我找到了如何使图片显示在单击的项目符号（绿色方块）上的方法，这里的setInterval函数非常清晰。但当我尝试将这些机制连接在一起时，我发现我只能通过单击清除setInterval。所以一旦我使用子弹，自动旋转就不起作用了

有没有办法用这个代码把两者结合起来？例如，我点击一颗子弹，图片静止了5秒钟，然后它以同样的速度继续旋转

---

我试图在每次项目符号单击后包含一个新的设置间隔，但失败了。

我想您需要的是设置超时。setTimeout将在设定的毫秒数后执行一次函数。因此，在本例中，您可以执行以下操作：

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

因此，在这种情况下，下一次淡入淡出不会在单击后的5秒钟内发生，但旋转将以2秒的间隔继续

示例JSFIDLE:

---

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

（函数（）{
$（“.list li:gt（0）”）.hide（）；
var start=function（）{
$（“.list>：第一个子项”）
.fadeOut（）
.next（）
.fadeIn（）
(完)
.appendTo（“.list”）；
},
go=功能（要素）{
返回设置间隔（开始，2000）；
},
int=go（）；
$（.bullet”）。在（“单击”，函数（）上{
清除间隔（int）；
$（“.list li”）.fadeOut（）；
var$this=$（this）；
如果（$this.hasClass（“一”））{
$（“.list li.frst”）.show（）；
}else if（$this.hasClass（“二”））{
$（“.list li.scnd”）.show（）；
}else if（$this.hasClass（“三”））{
$（“.list li.thrd”）.show（）；
}else if（$this.hasClass（“四”））{
$（“.list li.frth”）.show（）；
};
setTimeout（函数（）{
int=go（）；
}, 2000);
})
}());
.view{
裕度：100px自动0；
宽度：200px；
位置：相对位置；
}
.名单{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
}
李先生{
位置：绝对位置；
排名：0；
左：0；
}
.ctrl{
底部：-215px；
显示器：flex；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
}
.子弹{
背景颜色：绿色；
高度：10px；
宽度：10px；
光标：指针；
}











这里是一个更新的片段，它消除了跳跃。基本上，问题出在“.appendTo（“.list”）；”中，它重新排列了列表项的顺序，使得单击项目符号后很难继续旋转。为了解决这个问题，代码做了显著的更改，但是应该更有效，因为dom不会每次都被重新排序。此外，我删除了一些不必要的类，现在使用.index（）来协调项目符号和列表项，如前所述


（函数（）{
var start=function（）{
var active=$（'.active'），
下一个=活动
.removeClass（'活动'）
.fadeOut（）
.next（）；
如果（！next.length）{
next=$（'ul li:first child'）；
}
下一个
.addClass（“活动”）
.fadeIn（）
.end（）；
},
go=函数（）{
返回设置间隔（开始，2000）；
},
int=go（）；
$（.bullet”）。在（“单击”，函数（）上{
var currentIndex=$（'div.bullet'）。索引（此），
currentLi=$（'ulli'）.eq（currentIndex）；
清除间隔（int）；
$（'.active'）.removeClass（'active'）.fadeOut（）；
currentLi.addClass（'active'）.fadeIn（）；
int=go（）；
})
}());
.view{
裕度：100px自动0；
宽度：200px；
位置：相对位置；
}
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
}
ulli{
位置：绝对位置；
排名：0；
左：0；
}
.ctrl{
底部：-215px；
显示器：flex；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
}
.子弹{
背景颜色：绿色；
高度：10px；
宽度：10px；
光标：指针；
}











如果您等待第一张图片通过，然后单击第一个项目符号，您将看到第一张图片与其他图片重叠。我是说，它只是在眨眼。当我尝试加入更多的设置间隔时，我也遇到了类似的问题。那么，有没有办法避免这种闪烁呢？我只是不明白，我应该改变什么来摆脱这个问题。好吧，谢谢，我想这是解决这个问题的最好办法。现在我必须花一些时间来研究这段代码。
(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);
  })
}());