如何只在我的网页上运行一次间隔？ （jquery的）

Question

我有一个网页：

<textarea class="form-control" rows="5" id="textArea" name='textArea' maxlength="250" style="resize:none" placeholder=""></textarea>
<small>
    <span id="counter"></span>
</small>

和一个绑定到此的jquery：

$('#textArea').bind('input propertychange', function () {
    display30Seconds();
});


function display30Seconds() {
    var validTime = 30000;
    counterInterval = setInterval(function () {
        $('#counter').html(validTime / 1000);
        validTime = validTime - 1000;
    }, 1000);
}

我想要一个简单的效果 - 当用户开始在文本区域输入时，他看到计数器从30下降到0.当计数器下降到零时，我想显示警告并禁用文本区域。到目前为止它工作得很糟糕，因为每次用户在文本区域中键入任何内容 - 然后我们启动另一个计数器并叠加。我该如何解决？ http://jsfiddle.net/jf4ea4nx/

Answer 1

  

我想要一个简单的效果 - 当用户开始在文本区域输入时，他会看到计数器从30下降到0.当计数器降到零时，我想显示警告并禁用文本区域。

检查以下代码中的评论

Demo

＆＃13;

＆＃13;

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

// Define the variable
var interval;

function display30Seconds() {
  var validTime = 3000; // Changed for Demo purpose

  // If timer not already started
  if (!interval) {
    // Save the interval id
    interval = setInterval(function() {

      $('#counter').html(validTime / 1000);
      validTime = validTime - 1000;

      // When timer reaches zero
      if (validTime < 0) {
        // Clear the interval
        clearInterval(interval);
        alert('Time Up!');

        // Disable textarea
        $('#textArea').prop('disabled', true);
      }
    }, 1000);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="form-control" rows="5" id="textArea" name='textArea' maxlength="250" style="resize:none" placeholder=""></textarea>
<small><span id="counter"></span></small>

＆＃13;

＆＃13;

＆＃13;