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();
});