setTimeout和动画问题

Question

请帮忙！ 我这里有一个奇怪的问题。

DEMO

此图库中的问题是，如果您快速鼠标悬停/鼠标移动 DURING 动画
比画廊变得“疯狂”，表现得像.animate（）正在与setTimeout战斗。

AFAIK - 你不能在这里使用setInterval，因为如果你从另一个'标签'返回到画廊，那么画廊的行为就像它会补偿所有的动画（在不活动期间） - 立刻。

请帮助我了解此问题并找到解决方法。
提前致谢！

用于胆的代码：

var galW = $('#gallery').width(),
    imgN = $('#slider img').length,
    c = 1,   // counter
    timeOut,
    pause = false;

$('#slider').width(galW * imgN);

function auto() {
    if (pause) { return; }                        // if hovered : stop 'timeOut'
    timeOut = setTimeout(function() {
        c++;
        if (c === (imgN + 1)) {
            c = 1;
        }
        $('#slider').animate({left: '-' + galW * (c - 1) + 'px'}, 1200, auto);
    }, 1900);
}
auto();

$('#galcontainer').hover(function() {
    pause = true;
    clearTimeout(timeOut);
}, function() {
    pause = false;
    auto();
});

Answer 1

看看这个

http://jsfiddle.net/8Lzxs/3/

var galW = $('#gallery').width(),
    imgN = $('#slider img').length,
    c = 1,   // counter
    timeOut,
    pause = false;

$('#slider').width(galW * imgN);

function auto() {
    if (pause) { return; }                       
    clearTimeout(timeOut);               // THE (added) FIX !!!!!!!!! //
    timeOut = setTimeout(function() {
        c++;
        if (c === (imgN + 1)) {
            c = 1;
        }
        $('#slider').animate({left: '-' + galW * (c - 1) + 'px'}, 1200, auto);
    }, 1900);
}
auto();

$('#galcontainer').hover(function() {
    pause = true;
    clearTimeout(timeOut);
}, function() {
    pause = false;
    auto();
});