Javascript setTimeout 函数问题

Question

我有一个测试页面http://www.emoceanstudios.com.au/test.php，下面是相关脚本：

<script type="text/javascript">
function slide_out(){
    $('#red-block').animate({
        marginLeft: -278
    }, 500);
    $('#yellow-block').animate({
        marginTop: -316
    }, 500);    
    $('#gray-block').animate({
        marginLeft: 278
    }, 500, function(){
        $('#three-color-container').fadeOut(500, function() {
            $('#three-color-container-new').fadeIn(500, function() {
                window.setTimeout(function(){slide_in()}, 4000);
            });
        }); 
    }); 
}
function slide_in(){
    $('#three-color-container-new').fadeOut(500, function() {
        $('#three-color-container').fadeIn(500, function(){
            $('#red-block, #yellow-block, #gray-block').animate({
                marginLeft: 0,
                marginTop: 0
            }, 500, function() {
                window.setTimeout(function(){slide_out()}, 4000);
            });
        });
    });
}

window.setTimeout(function(){slide_out()}, 4000);
</script>

现在红色黄色灰色块像这样滑动： 出，入，出，入，出，然后闪烁（这不是我想要的），仅适用于两个半循环。 如果我将计时器从 4000 设置为 6000，它最多可以工作 3 次循环，然后也会中断。

我希望它永远出入出入出入出入出入出入出入出出入永远 我想问题可能出在 setTimeout 函数中。

Answer 1

您的#red-block, #yellow-block, #gray-block 动画调用了该 setTimeout 函数 3 次，导致整个进程每次运行时都重复三次，最终导致冲突。

在不更改太多代码的情况下，最好的解决方案是这样做：

$('#red-block, #yellow-block').animate({marginLeft:0,marginTop:0},500);
$('#gray-block').animate({marginLeft:0,marginTop:0,500,function() {setTimeout(slide_out,4000);});