Вручную установить интервал времени для setInterval

Question

Я пытаюсь создать приложение, в котором пользователь может выбрать, как часто они хотят, чтобы счетчик увеличивался. Например, они печатают в поле ввода, что они хотят, чтобы увеличить на 1 каждые 5 секунд, и setInterval будет установлен на 5 секунд, и т.д. Вот то, что я до сих пор:

<input type="text" id="timer"></input> 
<input type="button" onlick="setTime()" value="test" /> 
<h1>0</h1> 
<button class="play">Play</button> 
<button class="pause">Pause</button> 
<script type="text/javascript"> 
    function setTime() { 
     var output = $('h1'); 
     var isPaused = true; 
     var count = 0; 
     timer = document.getElementById("timer").value; 
     setInterval(function() { 
     if(!isPaused) { 
      time++; 
      output.text(time); 
     } 
     }, timer*1000); 
    } 

    //with jquery 
    $('.pause').on('click', function(e) { 
     e.preventDefault(); 
     isPaused = true; 
    }); 

    $('.play').on('click', function(e) { 
     e.preventDefault(); 
     isPaused = false; 
    }); 
</script> 

Могу ли я получить любые идеи или помощь? Я ценю это заранее

Answer 1

Рефакторинг немного ваш код, вы можете сделать это следующим образом:

Every <input type="text" id="timer"></input>Seconds<br> 
    <button class="start">Start</button> 
<h1>0</h1> 
<button class="play">Play</button> 
<button class="pause">Pause</button> 

И в JS:

var interval = null; 
var time = 0; 
var output = $('h1'); 

function setTimer() { 
    var seconds = +($("#timer").val());//Get the user input (and convert to number) 

    interval = setInterval(function() { 
     time++; 
     output.text(time); 
    }, seconds*1000); 
} 

//with jquery 
$('.pause').on('click', function(e) { 
    e.preventDefault(); 
    if(interval){ 
    clearInterval(interval);//Clear the created interval 
    } 
}); 

$('.play').on('click', function(e) { 
    e.preventDefault(); 
    setTimer(); 
}); 

$('.start').click(function(){ 
    time = 0; 
    setTimer(); 
}); 

См. Рабочий пример здесь: https://output.jsbin.com/cukehijuwo/

Answer 2

Каждый раз, когда пользователь называет setTime, вы создаете еще один интервал. Они будут продолжать создаваться на протяжении всего жизненного цикла вашего приложения. Вы должны удалить время ожидания перед созданием новых:

var timeoutID = null; 

function setTime() { 
    ... 
    clearTimeout(timeoutID); 
    timeoutID = setTimeout(function() { 
    ... 
    }, timer * 1000); 
} 

Для справки: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Answer 3

Полный простой тестирование программы, надеюсь, это поможет вам

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 
    function display() { 
     $("h1").html(parseInt($("#inc").val()) + parseInt($("h1").html())) ; 
     t = setTimeout("display()",parseInt($("#int").val())*1000) 
    } 
    function pauseT(){ 
     clearTimeout(t); 
    } 
    function continueT(){ 
     t = setTimeout("display()",parseInt($("#int").val())*1000) 
    } 

</script> 
Increment Value<input type="text" id="inc"></input> 
Interval in Second<input type="text" id="int"></input> 
<input type="button" onclick="display()" value="Start" /> 
<h1>0</h1> 
<button onclick="continueT()">Continue</button> 
<button onclick="pauseT()">Pause</button>