if else语句

Question

键入textarea..on textarea更改它的更新计数器＆＃34; char_count＆＃34;一旦达到0，它就会闪烁......然后点击退格，直到计数器达到1

问题是它不会停止闪烁

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

这里是jsfiddle https://jsfiddle.net/mzx79os2/1/

Answer 1

我已经调查了你所附带的小提琴。有两个问题，

1. 在keyup上，您每次都会在关键字上附加jQuery animations。所以clearing这段时间不会帮到你。
2. 必须停止jQuery动画，使用$(element).stop(true, true)

我已经更新了jsFiddle，并且还添加了一个检查isBlinking来仅附加一次动画。

检查此链接

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

您的代码存在多个问题：

1. 在你的情况下，clearInt设置在keyup处理程序内（所以在每次按键后你都会将clearint重置为0，所以你不能清除正确的一个）
2. 您在每个按键上设置了多个时间间隔，只需删除最后一个时间间隔，如果没有一个时间间隔，则只应添加一个时间间隔
3. 要停止动画，您应该使用jQuery的stop方法
4. 您还应该在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');
});