横幅javascript变得更快

Banner javascript becomes more faster

本文关键字：javascript 横幅      更新时间：2023-09-26

下面附加的代码，我正试图用javascript制作一个横幅。

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

我遇到的问题是，当循环结束时，有一个按钮说"回来"，即循环横幅再次运行，但运行我更快，我不知道为什么会发生这种情况，因为这在1秒(1000)，每次我点击按钮的速度增加。

为什么会发生这种情况?

有什么想法吗?

Thank you so much

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

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

因为您正在为每次点击设置一个新的间隔。设置新参数前需要先执行clearInterval()。请注意，var refreshIntervalId与全局refreshIntervalId不同，因为它是一个完全不同的局部变量，具有相同的名称(意味着它从未被清除):

function Volver(){
    i = 0;
    clearInterval(refreshIntervalId); 
    refreshIntervalId = setInterval(Ver,1000);  
}
相关文章：