JavaScript - setInterval только работает один раз

Question

http://jsfiddle.net/689nauny/

setInterval() работает только один раз ... WTF происходит?

SO просит более подробную информацию, но предоставление JSFiddle о таком наглядном, как я могу быть? Я попытался использовать анонимную функцию и теперь обратный вызов. Я просто не понимаю? : -/

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

Answer 1

Вам нужно обернуть обработчик интервала в функции:

 intervalId = setInterval(function() { intervalFunc(thinkingTime, answerTime) }, 1000); 

Ваш код, как Размещенное вызова в и передать результат setInterval(). Интервальный таймер не работает вообще!

После этого вам необходимо устранить проблему сохранения значения времени убывания. В настоящее время вы передаете переменную как параметр и вычитаете ее, но вы не обновляете исходную переменную.

function intervalFunc(thinkingTime, answerTime) 
{ 
    jQuery('#qanda-time-remaining').text(''+(thinkingTime)); 
} 

Затем измените setInterval установки:

intervalId = setInterval(function() { intervalFunc(--thinkingTime, answerTime) }, 1000); 

} 

Answer 2

Вот рабочий пример: http://jsfiddle.net/689nauny/3/

Вашего вопрос был частично с областью и, в общем, как вы декрементируетесь обратный отсчет переменной

var thinkingTime = undefined; 
var answerTime = undefined; 
var intervalID = undefined; 

function enableTimer(time) { 

    var hasThinkingTime = true; 
    thinkingTime = time; 

    var hasAnswerTime = true; 
    answerTime = 10; 

    if (hasThinkingTime && hasAnswerTime) { 
     intervalID = setInterval(function() { 
      thinkingTime -= 1; 
      jQuery('#qanda-time-remaining').text('' + (thinkingTime)); 
     }, 1000); 
    } 

    setTimeout(function() { 

     clearInterval(intervalID); 

    }, time * 1000); 
} 

enableTimer(30); 

Answer 3

Ваш код не работает из-за t его линия:

setInterval(intervalFunc(thinkingTime, answerTime), 1000); 

Изменить его в этом:

setInterval(function(){ 
    intervalFunc(thinkingTime, answerTime); 
}, 1000); 

Вы должны предоставить функцию setInterval(), в то время как вы обеспечиваете undefined.

Именно поэтому он не работает.

Running Код:

function enableTimer(time) 
 
{ 
 
    var elem = jQuery('#qanda-time-remaining'), interval = setInterval(function(){ 
 

 
     if(time/1 == time/1 && time) //if(!isNaN(time) && time>0) 
 
     { 
 
      elem.text(time--); 
 
     } 
 
     else 
 
     { 
 
      clearInterval(interval); 
 
      elem.text(0); 
 
     } 
 
     
 
    }, 1000); 
 
} 
 

 
enableTimer(5);

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

Я упростил свой код до крайности и так легко читать.

Вы можете установить новый параметр, к которому вы обеспечиваете функцию, которая будет выполняться после того, как время истекло:

function enableTimer(time, fn) 
 
{ 
 
    var elem = jQuery('#qanda-time-remaining'), interval = setInterval(function(){ 
 

 
     if(time/1 == time/1 && time) //if(!isNaN(time) && time>0) 
 
     { 
 
      elem.text(time--); 
 
     } 
 
     else 
 
     { 
 
      clearInterval(interval); 
 
      elem.text(0); 
 
      if(fn instanceof Function)//if fn is a function 
 
      { 
 
       fn();//call it 
 
      } 
 
     } 
 
     
 
    }, 1000); 
 
} 
 

 
enableTimer(5, function(){ alert('Time\'s up!'); });

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