Firefox setTimeout + jQuery 淡入淡出循环不一致，提前停止，不会循环

Firefox setTimeout + jQuery fade loop inconsistent, stops early, won't cycle

本文关键字：循环 不一致 setTimeout jQuery 淡入 淡出 Firefox      更新时间：2023-09-26

http://jsfiddle.net/x6PCD/11/

我正在尝试制作一个幻灯片，在几个绝对定位的div之间淡出。在Chrome，IE9，Opera上，下面的代码工作正常。但是在 Firefox 上，超时会超时一两次，然后停止。如果删除下面标记的JS部分，它将正确循环。

<style>
.slide {position:absolute; top:0; left:0; width:300px; height:200px}
</style>
<div id="slides" class="slides">
<div class="slide slide1" style="background:#c66">
  <div class="swap_links">
    <a href="javascript:" class="active">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide2" style="background:#6c6">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:" class="active">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide3" style="background:#36c">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:" class="active">3</a>
  </div>
</div>
</div>
<script type="text/javascript">
$(function() {
    var fp = '#slides .slide';
    var fs = 300;
    var t = window.setTimeout(swap, 1000);
    $(fp).slice(1).hide();
    function swap(to) {
        //removing this section, loop plays in FF
        if (to) {
            $(fp + to).fadeIn(fs);
            $(fp).not('.slide' + to).fadeOut(fs);
            window.clearTimeout(t);
            return;
        }
        $(fp).eq(1).fadeIn(fs);
        $(fp).eq(0).fadeOut(fs, function() {
            $(this).appendTo('#slides');
            t = window.setTimeout(swap, 1000);
        });
    }
    $('#slides .swap_links a').click(function() {
        swap($(this).html());
    });
});
</script>

FireFox 似乎一直在向函数中的 to 变量传递任意数值，导致如果传递的值不是 0，则执行 if(to){...} 语句。

要解决此问题，请在 setTimeout（） 中执行不带参数的 swap() 函数，如下所示：

var t = window.setTimeout(function(){ swap(); }, 1000);

这是更新的演示： http://jsfiddle.net/x6PCD/14/

我希望这有帮助！

相关文章：