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

【问题标题】：Why is this my jQuery function firing twice?为什么我的 jQuery 函数会触发两次？
【发布时间】：2013-01-07 00:15:37
【问题描述】：

所以我正在尝试创建一个小型的个人使用 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=""/>

【问题讨论】：

它可能与这样的事情有些相关吗？（setInterval 没有等效的 clearInterval）stackoverflow.com/questions/12266265/…
您可能在代码中直接或间接多次调用.slideShow()
也许你需要一个 return false ？
一开始我也是这么想的，但是我查看了所有代码，找不到我再次调用该函数的任何地方。这就是为什么我希望有人可以帮助我找到那个或其他问题
我怀疑 fadeToggle() 应对这种意外行为负责。使用 fadeOut/fadeIn 得到相同的结果吗？

标签： javascript jquery html

【解决方案1】：

我在这里缩小了问题的范围，并注意到它只在我切换标签时发生。所以，稍微搜索一下就发现了一些东西。

按照设计，Chrome 似乎堆叠了 setInterval 调用。因此，当您返回到非活动选项卡时，它恰好会连续运行它们。

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

【讨论】：