clearInterval和setInterval如果else語句

Question

型textarea..on textarea的改變中更新的「char_count」計數器，一旦它到達0它，直到計數器到達1

的問題是它blinks..then擊中退格鍵不會停止閃爍

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

這裏的jsfiddle https://jsfiddle.net/mzx79os2/1/

Answer 1

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

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

我已經看着你附加的小提琴。這裏有兩個問題，

1. 在keyup你在KEYUP每次連接jQuery animations。所以clearing的間隔不會幫助你。
2. jQuery的動畫必須停止使用$(element).stop(true, true)

我已經更新了的jsfiddle並還增加了檢查isBlinking附加動畫只有一次。

檢查此鏈接

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