jquery 刚刚清除的区间怎么才能依赖呢？

Question

这是对这个问题的跟进 - 基本上我有一个文本区域，当用户开始输入某事时，计数器开始从 3 下降到 0。当它达到 0 时，它被禁用。

现在我想添加重新开始的功能 - 当用户单击 link start over 时，文本区域再次启用并且用户有 3 秒（再次）执行输入。

我修改了jquery脚本：

$('#textArea').on('input propertychange', display30Seconds);

var interval;

function display30Seconds() {
    var validTime = 3000;

    if (!interval)
    interval = setInterval(function () {
        $('#counter').html(validTime / 1000);
        validTime = validTime - 1000;

        if (validTime < 0) {
            clearInterval(interval);
            alert('Time Up!');
            $('#textArea').prop('disabled', true);
            $('#counter').html('<a href="#" id="counterIsDone">start over</a>');

            $('#counterIsDone').on('click', function(){
                $('#textArea').prop('disabled', false);
                display30Seconds();
            });
        }
    }, 1000);
}

但我发现我无法再次调用方法 display30Seconds();。或者更确切地说，我可以，但不会再次设置间隔。我该如何解决？好像我没有在里面输入代码

 if (!interval)

因为间隔在清除后不再可见 (?)。所以我考虑将 var interval; 移动到方法体 function display30Seconds() { 中，但这并没有带来预期的效果。有办法解决吗？

这是我的更新 fiddle：http://jsfiddle.net/jf4ea4nx/3/

Answer 1

在 clearInterval() 调用后设置 interval=null。

似乎让您感到困惑的是 clearInterval(interval) 的语义。正如帕特里克埃文斯在他的评论中指出的那样，它不会将 interval 设置为在条件下计算为 false 的值。

为了完全清楚，除了 interval 变量之外，您还可以使用诸如 countdownRunning 之类的布尔变量来跟踪倒计时是否处于活动状态。

Answer 2

试试这个：

$('#textArea').on('input propertychange', display30Seconds);

var interval=false;

function display30Seconds() {
    var validTime = 3000;
    if (!interval)
    interval = setInterval(function () {
        $('#counter').html(validTime / 1000);
        validTime = validTime - 1000;

        if (validTime < 0) {
            clearInterval(interval);
            alert('Time Up!');
            $('#textArea').prop('disabled', true);
            $('#counter').html('<a href="#" id="counterIsDone">start over</a>');
         $(document).on('click','#counterIsDone', function(){
                $('#textArea').prop('disabled', false);
                display30Seconds();
            });
          interval=false; 
        }
    }, 1000);
}

Answer 3

您可以改用对迭代函数的条件递归调用来改进您的代码 - 每次调用都有一秒的延迟，这使得使用起来稍微更直观（将每次调用视为一次滴答）：

var seconds = 3;
$('#textArea').on('input propertychange', setTimeout(timeout.bind(null, seconds), 1000));

function timeout (iterations) {
        $('#counter').html(iterations);
        if (iterations === 0) {
            alert('Time Up!');
            $('#textArea').prop('disabled', true);
            $('#counter').html('<a href="#" id="counterIsDone">start over</a>');

            $('#counterIsDone').on('click', function(){
                $('#textArea').prop('disabled', false);
                timeout(seconds);
            });
        }
        else {            
            setTimeout(timeout.bind(null, --iterations), 1000);
        }
}

bind 函数简单地将 bind 函数的参数绑定到 timeout 调用的参数 - 绑定函数的第一个参数声明它的 this范围;但不要担心太多。

您可以通过更改 seconds 变量来修改计时器的持续时间。希望这有帮助:)

jquery 刚刚清除的区间怎么才能依赖呢？

How can I depend on the interval that I just cleared in jquery?

javascript

clearinterval