为什么 jQuery fadeOut 在这个 setInterval 循环中不起作用？答案

【问题标题】：Why does jQuery fadeOut not work inside this setInterval loop?为什么 jQuery fadeOut 在这个 setInterval 循环中不起作用？
【发布时间】：2010-12-20 01:42:10
【问题描述】：

我试图每隔几秒将随机项目加载到一个 div 中，每次加载之间都有一个很好的淡出/淡入过渡。代码如下：

<html>
  <body>
    <div id="item"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      // Load a random item
      var item = $('#item');
      function load_item() {
        item.fadeOut(5000, function() {
          item.load('http://dynamic.xkcd.com/comic/random/ #middleContent img', null, function() {
            item.fadeIn(5000);
          });
        });
      };

      // Load initial featured item
      load_item();

      // Schedule repeated loading
      setInterval(load_item, 15000);
    </script>
  </body>
</html>

这第一次运行良好，但在随后调用 load_item 时，fadeOut() 似乎停止工作。它实际上并没有将#item div 淡出，而是立即跳转到回调函数，忽略 5000 延迟。

我做错了什么？

【问题讨论】：

对我来说似乎工作正常，我在 Firefox 3.5 上尝试过
可能第二次调用load_item()的时候fadeout会立即调用回调函数，因为#item已经隐藏了，所以fadeOut不做5000毫秒的动画？
我是这么想的，但是#item div是可见的（我可以看到），所以我不知道为什么fadeOut()认为它是隐藏的。
我认为你没有发布足够的代码。您能否发布一个完整的运行示例来演示该问题，但最好是尽可能少的行，即仅重要的行？
它在 Safari 3 或 Firefox 3.5.5 中对我不起作用。它看起来有点像在 Firefox 中工作——div 加载新内容并淡入——但它不会淡出。

标签： jquery settimeout fadeout

【解决方案1】：

setInterval("load_item()",15000)

我知道把它放在引号里看起来很有趣，但它确实有效。

另一种选择是说：

load_item = function(){...etc...};
setInterval(loadItem,1500)

【讨论】：

这绝对不是正确的语法。你应该避免评估。像 Clay 那样传递函数引用是首选方式。