javascript - 在jQuery中停止和恢复计时器

Question

我有两个解决方案。他们中的第一个使用方法animate：

http://jsfiddle.net/g9aK8/3/

问题在于延迟，当我们暂停计时器，例如在 400px 并恢复时，我们必须再次等待所有延迟（条形的速度绝对较低）。

在我使用的第二个解决方案中interval：

http://jsfiddle.net/6wNcd/1/

它看起来更好，但是当我在几分钟后尝试停止它时，我不得不等待大约 30 秒然后停止。我不确定在这里interval使用那个小值是否正确。

你有什么想法如何巧妙地做到这一点？

Answer 1

试试这个 jquery 代码，我测试了它，它工作正常

$('#button').hover(function() {
    $(this).text('pause');
    $('#bar').stop();
}, function() {
    $(this).text('play');
    var w=$('#bar').css('width');
    var val=parseInt((6000*(500-parseInt(w))/500));
    $('#bar').animate({width: '500px'}, val, 'linear', function() {
        $('#bar').css('width', '0px');                      
    });
});
​​

Answer 2

如果您的第一个示例，每当您重新启动动画时，您总是设置一个 2 秒的动画，即使只有几个像素要动画，因此它看起来很慢。如果您希望它在重新启动时以相同的速率继续，您将不得不缩放动画中剩余距离的时间。

这是第一个示例的固定版本，它根据剩余的时间来缩放时间：

$('#button').click(function() {
    if($(this).text() == 'play') {
        $(this).text('pause');
        var box$ = $('#box');
        var left = parseInt(box$.css("left"), 10) || 0;
        box$.animate({ left:'150px' }, 2000 * ((150 - left) / 150), 'linear');
    }
    else {
        $(this).text('play')
        $('#box').stop();
    }
})

你可以在这里看到它的工作原理：http: //jsfiddle.net/jfriend00/TVg7x/

从您的两个选项中，我会选择第一个版本，因为第二个版本会运行一个间隔计时器，即使动画停止，这对于 CPU 利用率来说不是一个好主意，尤其是在移动设备上。