javascript - 横幅 javascript 变得更快

Question

下面附有代码，我正在尝试使用 javascript 制作横幅。

使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。

我遇到的问题是，当循环结束时，有一个按钮显示“返回”，即再次循环横幅运行，但运行得更快，我不知道为什么会发生这种情况，如1秒(1000)，每次单击按钮速度都会增加。

为什么会发生这种情况？

有什么想法吗？

非常感谢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
var i = 0;
var refreshIntervalId = setInterval(Ver,1000);
$( document ).ready(function() {

refreshIntervalId;

});


function Ver(){

    if ( i == 0 ){

        $("#div1").css("display","block");
        $("#div2").css("display","none");
        $("#div3").css("display","none");   

    }

    if ( i == 1 ){

        $("#div2").css("display","block");
        $("#div1").css("display","none");
        $("#div3").css("display","none");   

    }

    if ( i == 2 ){

        $("#div3").css("display","block");
        $("#div2").css("display","none");
        $("#div1").css("display","none");
        clearInterval(refreshIntervalId);       

    }

    i++;
}

function Volver(){
    i = 0;
    var refreshIntervalId = setInterval(Ver,1000);  
}


</script>


<div id="div1" style="background:#F00;width:300px;height:300px;display:none">


</div>


<div id="div2" style="background:#00F;width:300px;height:300px;display:none">


</div>


<div id="div3" style="background:#0FF;width:300px;height:300px;display:none">

<input type="button" value="volver" onclick="Volver()" />
</div>

Answer 1

<强> Demo

您没有清除您创建的第一个间隔，因此多个间隔同时运行

function Volver(){
    i = 0;
    clearInterval(refreshIntervalId);
    refreshIntervalId = setInterval(Ver,1000);  
}

此外，您还有很多不必要的代码。见下文。

<input type="button" value="volver" /> <!-- remove the onclick - you're using jQuery -->

JS

var i = 0;
var refreshIntervalId; // don't start the interval here- reuse the function you created
$( document ).ready(function() {
    // Since you want this button to do the same thing anyway,
    // bind this event and trigger it rather then execute the function separately
    $('input').on('click', Volver).trigger('click');
});

function Ver(){
    // show programatically, and hide by using .siblings() rather than
    // writing out many lines
    $("#div" + (i+1)).show().siblings().hide();

    i++;
    // self-clear after 3 iterations as there are no more divs 
    if (i>2) clearInterval(refreshIntervalId);
}

function Volver(){
    i = 0;
    clearInterval(refreshIntervalId);
    refreshIntervalId = setInterval(Ver,1000);  
}