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

由於以下原因，您的代碼無法正常工作：

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

將其更改為：

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

在提供undefined同時，需要為setInterval()提供一個函數。

這就是為什么它不運行的原因。

運行代碼：

 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> 

Answer 3

這是一個工作示例： 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);