Javascript setInterval 函數提高點擊速度

Question

我有一個在點擊時向下計數的腳本，它工作正常，但問題是當多次點擊“運行”按鈕時，計數器的速度會增加。 我已經使用“clearInterval”刪除了最近創建的間隔，但它仍然不起作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="run">Run</button>
<p class="show"></p>

腳本

$(".run").on("click", function() {
    var myInterval;
    var decrement=5;
    clearInterval(myInterval) ;
    myInterval=setInterval(function decrementNum() {
        decrement--;
        $(".decrement").text(decrement) ;
        if(decrement==0){
            decrement=5;
        }
        $(".show").text(decrement) ;
    }, 2000)
})

Answer 1

您的intervalId是函數本地的。 每次您添加越來越多的事件偵聽器時。 setInterval 的頻率正在增加，因此它的speed increases將變量移到外面，因此每次click ，訪問的 myInterval 都是相同的。

var myInterval;
$(".run").on("click", function() {
    var decrement=5;
    clearInterval(myInterval) ;
    myInterval=setInterval(function decrementNum() {
        decrement--;
        $(".decrement").text(decrement) ;
        if(decrement==0){
            decrement=5;
        }
        $(".show").text(decrement) ;
    }, 2000)
})