setInterval() is only running once... WTF is going on?
SO is asking for more details but providing a JSFiddle is about as descriptive as I can be? I've tried using an anonymous function and now a callback. I just don't get it? :-/
HTML
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="qanda-timer-container">
<div class="qanda-timer">
<span id="qanda-time-remaining"></span>
</div>
</div>
JS
function intervalFunc(thinkingTime, answerTime)
{
jQuery('#qanda-time-remaining').text(''+(thinkingTime - 1));
}
function enableTimer(time)
{
var intervalID;
var hasThinkingTime = true;
var thinkingTime = time;
var hasAnswerTime = true;
var answerTime = 10;
if(hasThinkingTime && hasAnswerTime)
{
setInterval( intervalFunc(thinkingTime, answerTime), 1000);
}
setTimeout(function(){
clearInterval(intervalID);
}, time * 1000);
}
enableTimer(30);
Here is a working example: http://jsfiddle.net/689nauny/3/
Your issue was partly with scope and in general how you decremented the count down variable
Your code doesn't work because of this line:
Change it into this:
You need to provide a function to
setInterval()
, while you are providingundefined
.This is why it doesn't run.
Running code:
I have simplified your code to the extreme and is so much easy to read.
You can set a new parameter to which you provide a function that will run after the time is up:
You need to wrap the interval handler in a function:
Your code as posted is calling the function and passing the result to
setInterval()
. The interval timer isn't running at all!After you do that, you'll need to fix the problem of maintaining the descending time value. Currently you pass the variable as a parameter and subtract one from it, but you don't update the original variable.
Then change the
setInterval
setup: