javascript - 当我的计时器达到零时调用一个函数

Question

我有一个定时器函数如下(我刚从 jsfiddle 上抓取):

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function returnDate(){
    return Number(new Date);
    }

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (returnDate());
        if ( msLeft < 1000 ) {
            element.innerHTML = "0:00";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

我调用该函数并将其设置为 2 分钟倒计时，如下所示:

$(".btn-start").click(function(){
 countdown("countdown-2-minutes",2,0);

});

我有另一个 id 为 countdown-8-minutes 的元素，我想在 countdown-2-minutes 上的计时器达到 0 时立即开始。我应该怎么做这？我想一个好的方法是监视第一个元素上的 html 何时读取“0:00”，但我不完全知道如何实现它。

Answer 1

这是我的建议；首先更改您的 countdown() 函数以接受回调参数:

function countdown( elementName, minutes, seconds, callback )
{
    var element, endTime, hours, mins, msLeft, time;

    function returnDate(){
    return Number(new Date);
    }

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (returnDate());
        if ( msLeft < 1000 ) {
            element.innerHTML = "0:00";
            if (typeof callback === 'function') {
                callback.call()
            }
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

然后通过您的初始调用传递该回调:

$(".btn-start").click(function(){
    countdown("countdown-2-minutes",2,0, function(){countdown("countdown-8-minutes",8,0);});
});