Question

我有那个Javascript计数器：

var x=100;
function timerCountdown()
{
    document.getElementById('timer1').value=x;
    x--;
    t=setTimeout("timerCountdown()",1000);

    if (x<-1)
    {
        document.getElementById('timer1').value='Done!';
        clearTimeout(t);
    }   
}

function stopCounter(){
clearTimeout(t);
x=x+1;
}

然后我用：

<body onFocus='timerCountdown()' onBlur='stopCounter()'>

但问题是，当页面加载时倒计时不会启动。它等着我点击另一个窗口并再次重新聚焦在窗口上。

所以我尝试了这个：

<body onLoad='timerCountdown()' onFocus='timerCountdown()' onBlur='stopCounter()'>

但这一次，倒计时非常快。可能是因为timerCOuntdown每秒调用两次。

或者，我可以在body标签中使用onFocus和onBlur，但是我需要一个函数来在Body加载时触发Focus。这可能吗？

有没有人有解决这个问题的建议？

非常感谢！

Answer 1

简单的答案是因为setTimeout被调用两次，分别运行timerCountdown()一次两次，并且不断设置两个setTimeout ID。

这就是你想要的：

var x = 100;
var t = 0;

function timerCountdown()
{
    if (t == 0) t = setInterval(timerCountdown, 1000);

    document.getElementById('timer1').value=x;
    x--;

    if (x < 0) 
    {
        document.getElementById('timer1').value='Done!';
        clearTimeout(t);
        ticker = 0;
    }
}

function stopCounter()
{
    clearTimeout(t);
    t = 0;
    x++;
}

setInterval更适合倒数计时器，因为setTimeout只运行一次而你需要不断运行，而且你需要继续调用它。

编辑：这可以修复Firefox上计时器的初始快速触发。

从<body onload=中删除处理程序，并将其添加到上面脚本块的末尾：

t = setInterval(timerCountdown, 1000);

我的Javascript计时器倒计时太快或者没有启动onLoad

1 个答案: