倒数计时器无法在Chrome/Safari上正常呈现,但在Firefox上正常

Question

function countDownRound() {
    if(myRoundTimeRemaining >= 0){
        var secs = myRoundTimeRemaining;
        if(secs < 10)
        {
            secs = "0" + secs;
        }
        $("#countdown").html(':'+secs);
        CountdownTimer = setTimeout(countDownRound, 1000);
        myRoundTimeRemaining--;
    }
    else{
        $("#countdown").html('');
    }
}

上面的代码在Firefox上做了预期的事情.每秒都会在"倒计时"元素中显示递减的数字.

在Safari和Chrome上,代码运行正常,但屏幕上的元素不会更改.如果发生其他事情(例如调整浏览器窗口的大小),则元素会在适当时更新.

这看起来像某种优化或基于线程的问题,但我找不到解决方案.

Answer 1

我在 Chrome、Safari 和 Firefox 上也能正常工作。

也许在这种情况下，您不需要使用 html 标签来显示结果，text()可能比html()效果更好。

尝试使用

$("#countdown").text(':'+secs);

而不是 html()。

OBS：看来操作系统的一些不稳定也会影响浏览器渲染。有人可以证实或否认这一点吗？