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

最大的问题是：你真正希望实现什么目标？

Answer 2

在幻灯片ID后立即移动计数器重置。

var fadeCounter = 0;

function fadeNext() {
  window.fadeCounter++;
  s = '#slide' + window.fadeCounter;
  if (window.fadeCounter == 8) window.fadeCounter = 0;
  $(s).fadeIn(1000,fadeNext);
  //forgive typos above, code works, what doesn't:

  //code will loop up to 8, then stop. why?
}

//initiate loop
fadeNext();

Answer 3

最简单的解决方案是：

fadeLoop(0);

function fadeLoop(id) {
  if (id <= 8) { // add "&& id >= 0" if you're pedantic
    $("#slide" + id).fadeIn(1000, fadeLoop(id+1));
  }
}

Answer 4

你准备做什么？函数是无限重复的吗？

我做了这个演示：

http://jsfiddle.net/AXRBh/

$(document).ready(function() {
    var fadeCounter = 0;
    var time = setInterval(fadeNext, 2000);

    function fadeNext() {
       fadeCounter++;
       $('.slide').fadeOut(1000,function(){
          s = '#slide' + fadeCounter;
          $(s).fadeIn();
       });
       if (fadeCounter == 8)
          fadeCounter = 0;
    }
});

Answer 5

我认为fadeCounter变量超出范围（在函数内部？）。这样做：

//initiate loop
$(document).ready(function(){
   window.fadeCounter = 0;  //Explicitly reference it as  a global var
   fadeNext();
});

您的fadeNext()函数声明保持不变。

Answer 6

因为您在检查是否超出范围之前使用增量变量。

第九次循环，您的代码将尝试$('#slide9').fadeIn

Fiddle working example

为什么这段代码不循环？

6 个答案: