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

Question

I have a webpage:

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

and a jquery binded to this:

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


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

I want a simple effect - when user starts typing in the text area, he sees the counter going down from 30 to 0. When the counter goes down to zero I want to display an alert and disable text area. So far it works bad, because each time user types anything in text area - then we start another counters and they overlay. How can I fix it? http://jsfiddle.net/jf4ea4nx/

Answer 1

I want a simple effect - when user starts typing in the text area, he sees the counter going down from 30 to 0. When the counter goes down to zero I want to display an alert and disable text area.

Check the comments in the code below

Demo

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