我的Javascript计时器倒计时太快，或者它无法在加载时启动

我有那个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()'>

但这一次，倒计时进行得相当快。可能是因为timerCuuntdown每秒被调用两次。

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

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

非常感谢！

简单的答案是因为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);

相关内容

最新更新

热门标签：