setIntervalのカウントダウンが速すぎる

Question

誰かが私を助けてくれましたか？クリックするたびにカウントダウンが速くならないようにする方法を知っていますか？私は明確な間隔を想定していますが、何を入れる必要があるかはわかりません。あなたはそれぞれの連続したクリックで前のタイムアウトをクリアすることはありませんので、おかげで

var cD = 100; 
 

 
function countDown() { 
 
    if (cD > 0) { 
 
     cD -= 1; 
 
     $(".countdown").html(cD +"s"); 
 
    } 
 
} 
 

 
$(".countdown-trigger").click(function(){ 
 
    cD = 100; 
 

 
    setInterval(countDown, 10); 
 
});

.countdown-trigger { 
 
    height: 50px; 
 
    width: 100px; 
 
    background-color: blue; 
 
} 
 

 
.countdown { 
 
    font-family: "Teko", sans-serif; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"> 
 
    </div> 
 
    <div class="countdown-trigger"> 
 
    </div>

Answer 1

問題は、それ故に3回クリックした後、あなたはすべての値が10ms毎にデクリメント3つのタイマーを持っている、です。

clearTimeout()cDが0になると修正されます。また、以前のものが実行されている間に複数の間隔を開始しないようにするメカニズムが必要な場合は、同じ問題が発生します。これを行うには、booleanフラグを使用できます。これを試してみてください：

var cD = 100, interval, running = false; 
 

 
function countDown() { 
 
    if (cD > 0) { 
 
    cD -= 1; 
 
    $(".countdown").html(('00' + cD).slice(-2) + "s"); 
 
    } else { 
 
    clearInterval(interval); 
 
    running = false; 
 
    } 
 
} 
 

 
$(".countdown-trigger").click(function() { 
 
    if (running) 
 
    return; 
 
    
 
    cD = 100; 
 
    running = true; 
 
    interval = setInterval(countDown, 10); 
 
});

.countdown-trigger { 
 
    height: 50px; 
 
    width: 100px; 
 
    background-color: blue; 
 
} 
 

 
.countdown { 
 
    font-family: "Teko", sans-serif; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"></div> 
 
<div class="countdown-trigger"></div>

Answer 2

var cD = 100; 
 
var myOtherVar; 
 

 
function countDown() { 
 
    if (cD > 0) { 
 
     cD -= 1; 
 
     $(".countdown").html(cD +"s"); 
 
    } else { 
 
     clearInterval(myOtherVar); 
 
    } 
 
} 
 

 
$(".countdown-trigger").click(function(){ 
 
    cD = 100; 
 

 
    myOtherVar = setInterval(countDown, 10); 
 
});

.countdown-trigger { 
 
    height: 50px; 
 
    width: 100px; 
 
    background-color: blue; 
 
} 
 

 
.countdown { 
 
    font-family: "Teko", sans-serif; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countdown"> 
 
    </div> 
 
    <div class="countdown-trigger"> 
 
    </div>

あなたが正しいです。あなたはあなたの間隔をクリアする必要があります。このエリアをクリックするたびに、10秒ごとに発生する別のイベントセットが設定されます。&これは、より速く&を高速化している理由です。