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

How can I run the interval on my webpage only once? (jquery)

本文关键字：一次 jquery 网页 我的 运行      更新时间：2023-09-26

我有一个网页：

<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/

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

检查下方代码中的注释

演示

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

相关文章：