在 jQuery 中停止和恢复计时器

Stopping and resuming timer in jQuery

本文关键字：恢复 计时器 jQuery      更新时间：2023-09-26

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

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

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

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

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

它

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

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

试试这个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');                      
    });
});
​​

如果您的第一个示例，无论何时重新启动动画，您总是在设置 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 利用率来说不是一个好主意，尤其是在移动设备上。

相关文章：