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