Баннер javascript становится более быстрым

Question

Приведенный ниже код, я пытаюсь создать баннер с javascript.

С setInterval Я делаю цикл, который показывает мне 3 divs, один за другим.

Проблема заключается в том, что когда цикл заканчивается, появляется кнопка, которая говорит «назад», то есть повторять цикл, чтобы запустить, но запустить меня быстрее, я не знаю, почему это происходит так, как это происходит в 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); 
} 

Answer 2

Поскольку вы устанавливаете новый интервал с каждым щелчком мыши. Перед установкой необходимо установить clearInterval(). Обратите внимание, что var refreshIntervalId не то же самое, как глобальный refreshIntervalId, как это совершенно другая локальная переменная с тем же именем (это означает, что он никогда не очищается):

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