Question

这是对这个问题的跟进 - https://stackoverflow.com/a/33430608/3766930 基本上我有一个文本区域，当用户开始输入时，计数器开始从3下降到0.当它达到0时它会被禁用。

现在我想添加一个重新开始的功能 - 当用户点击链接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() {的主体中，但这并没有带来预期的效果。有没有办法解决它？

这是我更新的小提琴：http://jsfiddle.net/jf4ea4nx/3/

Answer 1

在error C2248: 'Obj::operator new': cannot access private member declared来电后设置interval=null。

似乎让你感到困惑的是clearInterval()的语义。正如Patrick Evans在他的评论中指出的那样，它不会将clearInterval(interval)设置为在某个条件下评估为interval的值。

为了使其完全清楚，您可以使用false之类的布尔变量以及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

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

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调用的参数 - bind函数的第一个参数声明其this范围;但是不要太担心。

您可以通过更改seconds var来修改计时器的持续时间。希望这会有所帮助：）

我怎样才能依赖于刚刚在jquery中清除的时间间隔？

3 个答案: