Question

所以我正在尝试创建一个小型的个人使用jQuery插件。我已经完成了函数，但是由于某种原因，setInterval（）函数会触发两次，我似乎无法找出原因。起初它似乎没有发射两次，但我知道通过测试（在间隔的每个触发器上添加一个警报）它会发射两次，在示例here上你可以看到它逐渐变得越来越快（大约2分钟之后它会非常快）这是它发射两次的结果。

有人可以帮我解决这个问题吗？

Javascript代码：

(function( $ ) {

  $.fn.imageSwap = function(img) {
  var src = this.attr("src");
  var id = this;
  id.fadeToggle("fast", function(){
  id.attr("src", img);
  id.fadeToggle("fast");
  });
  return this;
  };

 })( jQuery );



(function( $ ) {

  $.fn.slideShow = function(array, time) {
  var i = -1;
  var num = array.length;
  var id=this;

  var interval = setInterval(function(){
  i++
  if(i>(num)-1){i=0}
  id.imageSwap(array[i]);
  },time);

  };

页面代码：

<script>

$("#slideshow").slideShow([
"http://www.rta.nsw.gov.au/licensing/images/dkt_faqs/number1.gif",
"http://www.rta.nsw.gov.au/licensing/images/dkt_faqs/number2.gif",
"http://www.rta.nsw.gov.au/licensing/images/dkt_faqs/number3.gif",
"http://www.rta.nsw.gov.au/licensing/images/dkt_faqs/number4.gif"
], 1000);

</script>

<img id="slideshow" src=""/>

Answer 1

我在这里缩小了问题，发现只有当我切换标签时才会发生这种情况。所以，一些搜索揭示了一些事情。

根据设计，Chrome似乎堆叠了setInterval次来电。因此，当您返回到非活动选项卡时，它恰好会连续运行它们。

您可以在SO中看到其他相关问题的一些变通方法：

When using setInterval, if I switch tabs in Chrome and go back, the slider goes crazy catching up
How can I make setInterval also work when a tab is inactive in Chrome?

为什么我的jQuery函数会触发两次？

1 个答案: