jquery - 为什么这段代码不循环？

Question

var fadeCounter = 0;

function fadeNext() {
  window.fadeCounter++;
  s = '#slide' + window.fadeCounter;
  $(s).fadeIn(1000,fadeNext);
  //forgive typos above, code works, what doesn't:
  if (window.fadeCounter == 8) window.fadeCounter = 0;
  //code will loop up to 8, then stop. why?
}

//initiate loop
fadeNext();

编辑:

已添加演示，地址:http://jsfiddle.net/AXRBh/2/在演示中，循环应重置为 20，但会停止。为什么？

Answer 1

如果 fadeCounter 没有在全局范围内声明，它将不起作用。确保在 document.ready 处理程序外部定义变量(或删除 window.)。

该函数确实不断调用自身(仅一次，请参阅下一段)，但您看不到效果。在第一个“循环”之后，所有元素都可见，因此对它们第二次调用 fadeIn 没有任何效果。

因为它们已经可见，所以立即触发 fadeIn 回调，使函数以奇怪的方式运行: http://jsfiddle.net/fkling/nZ7Mn/
在这种情况下，在重置计数器之前执行作为回调传递的下一个 fadeNext:

  // s is already visible, so `fadeNext` is called immediately
  $(s).fadeIn(1000,fadeNext);
  // only after that the timer is reset (too late)
  if (window.fadeCounter == 8) window.fadeCounter = 0;

由于不存在 ID 为 #slide9 的元素，因此对其调用 fadeIn 不起作用，递归会停止。

如@Cybernate already noted ，颠倒这两个语句的顺序可以解决问题。但是，您仍然看不到效果，因为元素已经可见。您只是不必要地快速调用该函数，甚至可能导致浏览器崩溃。

因此，为了使其正常工作，您应该再次隐藏元素。这是一个更干净的版本:

var max = 4;

function fadeNext(i) {
  i = i % max;
  $('body').append('<div>Current counter: ' + i + '</div>');
   $('#s' + i).fadeIn(1000,function() {
       $(this).fadeOut(1000, function(){fadeNext(i + 1)});
   });                                      
}

//initiate loop
fadeNext(0);

不要让函数访问和更改全局变量(这可能会导致您已经经历过的某种“竞争条件”)，而是将下一个索引作为参数传递给函数。

DEMO

最大的问题是:您真正想要实现什么？