横幅JavaScript变得更快

下面附加的代码，我试图用javascript做一个横幅。横幅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>

来源

2015-09-09 user3810167

'变种refreshIntervalId =的setInterval（版本，1000）;已经'开始的时间间隔。 '$（document）.ready（function（）{refreshIntervalId;}）;'什么都不做。 – Xufox

这么多的代码可以用很少的代码行写入''function Ver（）{（“＃div”+（i + 1））。show（）。siblings（）。hide（）; i ++; }' – Popnoodles

Demo

你不清除您创建的第一个区间，因此不止一个正在同时运行

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

还有很多不必要的代码。见下文。

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

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

来源

2015-09-10 00:04:15 Popnoodles

因为你设置的每点击一个新的时间间隔。在设置一个新的之前，您需要clearInterval()。需要注意的是var refreshIntervalId是不一样的全球refreshIntervalId因为它具有相同的名称完全不同的局部变量（这意味着它不会被清零）：

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

来源

2015-09-09 23:59:51

横幅JavaScript变得更快

回答

相关问题