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

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

现在我想添加一个重新开始的功能-当用户单击链接

重新开始

，文本区域将再次启用，并且用户有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);
}

因为清除间隔（？）后，间隔不再可见。所以我考虑移动

var区间

进入方法体

函数display30Seconds（）{

，但这并没有带来预期的效果。有没有办法修复它

---

这是我更新的小提琴：

在调用

clearInterval（）

之后设置

interval=null

让您感到困惑的是

clearInterval（interval）

的语义。正如Patrick Evans在他的评论中指出的，它不会将

interval

设置为在条件下计算为

false

的值

要完全清楚，除了

间隔

变量之外，还可以使用布尔变量，例如

countdownRunning

，以跟踪倒计时是否处于活动状态。

尝试以下操作：

$('#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);
}

$（'#textArea'）。打开（'input Property Change'，显示30秒）；
var区间=假；
函数display30Seconds（）{
var-validTime=3000；
如果（！间隔）
间隔=设置间隔（函数（）{
$（'#counter'）.html（有效时间/1000）；
有效时间=有效时间-1000；
如果（有效时间<0）{
间隔时间；
警报（“时间到了！”）；
$（'#textArea'）.prop（'disabled'，true）；
$（'#counter'）.html（''）；
$（文档）。在（'单击'，'计数器命令'，函数（）上）{
$（'#textArea'）.prop（'disabled'，false）；
显示30秒（）；
});
间隔=假；
}
}, 1000);
}

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

var秒=3；
$（'#textArea'）。on（'input propertychange'，setTimeout（timeout.bind（null，seconds），1000））；
函数超时（迭代次数）{
$（'#counter'）.html（迭代）；
如果（迭代次数===0）{
警报（“时间到了！”）；
$（'#textArea'）.prop（'disabled'，true）；
$（'#counter'）.html（''）；
$（“#countersdone”）。在（'click'，function（）上{
$（'#textArea'）.prop（'disabled'，false）；
超时（秒）；
});
}
否则{
setTimeout（timeout.bind（null，--iterations），1000）；
}
}

bind

函数将

bind

函数的参数简单地绑定到

timeout

调用的参数-bind函数的第一个参数声明了它的

这个

范围；但是不要太担心这一点

---

您可以通过更改

seconds

var来修改计时器的持续时间。希望这有帮助：）

我建议使用setTimeout而不是setInterval-只要让setTimeout每秒调用一次

clearInterval

不会从传递的变量中删除值，因此

interval

仍将具有w如果（！interval）总是计算为falseFYI:

setInterval

/

clearInterval

与jQueery无关，那么它被分配的计时器id与jQueery无关-您没有修改jQueery脚本，而是修改了发生在我们jQueery身上的javascript

$('#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);
}

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);
        }
}