Question

我使用JavaScript创建了一个非常简单的计时器。但是，目前无法暂停setInterval()

HTML：

<div class="bar"></div>
<div class="show">0</div>
<input type="text" name="count" class="count">
<div class="submit">submit</div>

JS：

var submit = $('.submit');
var bar = $('.bar');
$('.submit').click(function () {
    var count = $('.count').val();
    var newCount = parseInt(count);
    var i = 0;
    var timeChange = 1000;
    console.log(newCount);
    var timer = setInterval(function () {
        i++;
        console.log(i);
        $('.show').text(i);
        if (i == newCount) {
            clearInterval(timer);
            console.log('Finished!');
            bar.delay(2000).animate({
                width: '0%'
            }, 1000);
        }
    }, 1000)
    bar.animate({
        width:'100%'
    }, newCount * 1000, 'linear');
});

有没有办法可以暂停setInterval，但一旦停止就恢复它的位置？

Answer 1

（在我看来）暂停setInterval()的最简单方法是添加一个布尔paused变量，然后在间隔回调中只检查该变量并在暂停时立即返回。这样您就不必担心重置任何其他变量的状态;即使“暂停”，间隔本身也会继续运行，但暂停时你的功能不会做任何事情。

默认情况下，jQuery实际上没有办法在开始时暂停动画（尽管有几个允许这样做的插件），但是你需要扩展进度条，而不是单次调用.animate()为了100％宽度，您可以在.animate()回调中移动setInterval()调用，并一次一步地设置动画 - 使用看起来相同的线性动画，但允许每一步都暂停。

你没有说什么会触发暂停，但假设你想添加一个暂停按钮，那么这将有效：

var paused = false;
$("#pause").click(function () {
    paused = !paused;
});

var bar = $('.bar');
$('.submit').click(function () {
    // consider adding clearInterval(timer); here so that you don't have
    // two or more timers going if the user clicks submit multiple times,
    // and move the `var timer` declaration to just before this function
    var newCount = parseInt($('.count').val(), 10);
    var i = 0;
    var timeChange = 1000;
    console.log(newCount);
    var timer = setInterval(function () {
        if (paused) return; // do nothing when paused
        i++;
        bar.animate({
            width: 100 / newCount * i + '%'
        }, 1000, 'linear');
        console.log(i);
        $('.show').text(i);
        if (i == newCount) {
            clearInterval(timer);
            console.log('Finished!');
            bar.animate({
                width: '0%'
            }, 1000);
        }
    }, 1000);
});

演示：http://jsfiddle.net/hyZ3L/1/

请注意，如果您对用户输入的数据使用parseInt()，您确实应该添加,10第二个参数以确保它被解析为基数10.并且您应该添加一些代码来验证用户实际输入了一个号码，或者你的计时器将永远存在。您可能希望在我上面评论的位置添加clearInterval()。

暂停setInterval，但一旦停止就恢复它的位置

1 个答案: