Question

setInterval（）只运行一次...... WTF正在进行？

所以要求提供更多细节，但提供一个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);

在提供setInterval()时，您需要向undefined提供一项功能。

这就是为什么它没有运行。

运行代码：

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

JavaScript - setInterval只运行一次

3 个答案: