if else 语句中的 clearInterval 和 setInterval

Question

type in textarea..on textarea change it updates counter of "char_count" once it reaches at 0 it blinks..then hit backspace till counter reaches at 1

the issue is it wont stop blinking

<div>
<textarea rows="10"></textarea>
<div class="char_count">5 characters remaining</div>
</div>

here is jsfiddle https://jsfiddle.net/mzx79os2/1/

Answer 1

I have looked into the fiddle you've attached. There are two issues,

1. On keyup you're attaching jQuery animations each time on keyup. So clearing the interval wont help you.
2. jQuery animation has to be stopped, use $(element).stop(true, true)

I have updated the jsFiddle and also added a check isBlinking to attach animation only once.

Check this link

https://jsfiddle.net/mzx79os2/8/

Answer 2

var descriptionTextarea = $("textarea");
var char_count = ".char_count";
var textMax = 5;
var isRunning = false;
var clearInt = 0;
$(char_count).html(textMax + ' characters remaining');
descriptionTextarea.on("keyup", function(e) {
  e.stopPropagation();

  var textLength = $(this).val().length;
  var textRemaining = textMax - textLength;
  var selfCharCounter = $(this).parent().find(char_count);

  function blink() {
    $(selfCharCounter).fadeOut(500).fadeIn(500);
  };

  if (textRemaining <= 0 && !isRunning) {
    selfCharCounter.css("color", "red");
    clearInt = setInterval(blink, 500);
    isRunning = true;
  } else if (textRemaining > 0 && isRunning) {
    isRunning = false;
    selfCharCounter.css("color", "");
    $(selfCharCounter).stop(true, true).fadeOut();
    $(selfCharCounter).stop(true, true).fadeIn()
    clearInterval(clearInt);
    clearInt = 0;
  }
  selfCharCounter.html(textRemaining + ' characters remaining');
});

There are multiple problems with your code:

1. In your case clearInt is set inside the keyup handler (so after every keypress you reset clearint to 0 so you don't clear the right one)
2. You set multiple intervals on every keypress and you just remove the last one, you should only add an interval if there's not one already running
3. To stop the animation you should use the stop method of jQuery
4. You should also paste the code with the problem on SO

Answer 3

https://jsfiddle.net/mzx79os2/13/

var $descriptionTextarea = $("textarea");
var $char_count = $(".char_count");
var textMax = 5;
var animation, animationInProcess;

$char_count.html(textMax + ' characters remaining');

function blinkStart(selfCharCounter) { 
   console.log('run blink');
   animationInProcess = true;
   animation = setInterval(function(selfCharCounter){
      if( !animationInProcess){
        blinkStop(selfCharCounter)
        return;
      }
      $(selfCharCounter).fadeOut(500).fadeIn(500);
   }, 500, selfCharCounter);
};

function blinkStop(selfCharCounter){
   console.log('stop blink');
   $(selfCharCounter).stop(true, true).show();
   clearInterval(animation);
};

$descriptionTextarea.on("keyup",function(e){
    e.stopPropagation();
    var textLength = $(this).val().length;
    var textRemaining = textMax - textLength;
    var selfCharCounter = $(this).next();

    if(textRemaining <= 0){
      (!animationInProcess) && blinkStart(selfCharCounter);
      selfCharCounter.css("color","red");
    }else{
      animationInProcess = false;
      selfCharCounter.css("color","");
    }

    selfCharCounter.html(textRemaining + ' characters remaining');
});