Question

我写了以下函数：

function fill(value) {
    return (value > 9) ? "" + value : "0" + value;
}

function fillMili(value) {
    value %= 1000;
    return (value <= 9) ? "00" + value : 
           (value <= 99) ? "0" + value :
           "" + value;  
};

function showClock() {
    var now = new Date;

    time = fill(now.getHours()) + " : " + fill(now.getMinutes()) + " : " + fill(now.getSeconds()) + " : " + fill(now.getMilliseconds());

    document.getElementById("clock").innerHTML = time;

    setTimeout("showClock()",1);
}

然后将该函数放入body标签并创建一个div标签：

<body onload="showClock()">
    <div id="clock">
    </div>

该页面将显示一个精细的时钟。但是，如果我改变这行代码

setTimeout("showClock()",1);

到

setInterval("showClock()",1);

浏览器将在加载此页面时冻结。

我知道函数setTimeout()将执行一次指定的函数，函数setInterval()将多次执行指定的函数。

我有两个问题：onload的{{1}}属性如何工作以及为什么函数body在此代码中不起作用？

更新：我想显示一个显示毫秒的时钟。 setInterval()属性是否重复该函数？

Answer 1

这是setInterval的语法：

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);

延迟毫秒。除此之外，这种延迟有一个古老的限制：

最小/最大延迟和超时嵌套

历史上，浏览器实现setTimeout（）“clamp”：连续   setTimeout（）调用延迟小于“最小延迟”限制   被迫至少使用最小延迟。最小延迟，   DOM_MIN_TIMEOUT_VALUE，为4毫秒（存储在Firefox的首选项中：   dom.min_timeout_value），DOM_CLAMP_TIMEOUT_NESTING_LEVEL为5ms。

事实上，4毫秒是由HTML5规范指定的，并且是一致的   浏览器于2010年及之后发布。之前（Firefox 5.0 /   Thunderbird 5.0 / SeaMonkey 2.2），嵌套的最小超时值   超时是10毫秒。

来源：mozilla

除了上面提到的最小延迟之外，你应该问自己为什么每隔几毫秒运行一个时钟功能的问题。你每隔1000毫秒= 1秒就做一次。

如果你想显示毫秒，你应该找到另一种显示方式，因为最小延迟仍然有效。

Answer 2

setInterval（....）函数中的time参数以毫秒为单位。 1毫秒是执行功能非常快，这可能是页面冻结的原因。尝试将其设置为1000（1000 ms = 1秒）。

请点击此处了解详情：http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 3

浏览器不应该冻结。摆脱onload标记中的<body>，并在页面<head>部分中显示：

window.onload = function() {
    var clock = document.getElementById("clock");
    window.setInterval(showClock, 1);
    showClock();
    function showClock() {
        var now = new Date();
        var time = fill(now.getHours()) + " : " + fill(now.getMinutes()) + " : " + fill(now.getSeconds()) + " : " + fill(now.getMilliseconds());
        clock.innerHTML = time;
    }
}

这应该让它更快更优雅。

Live test case

Answer 4

考虑到当前的浏览器实现和硬件，也许您应该意识到您尝试做的事情是不可能的。

在我的计算机上，Chrome在屏幕上重绘3x16区域所需的时间约为300毫秒。要进行1000次此类更新，需要5分钟。你想一秒钟做。你的硬件显然要求太多了。

如果你真的需要在webbrowser中有那么多性能（好像......），你应该编写一个原生插件，但我仍然怀疑你能够多次重绘一部分屏幕（至少你需要一台1000hz的显示器，这对你来说是愚蠢的。）

重新思考你的应用程序逻辑：即使你显示一个毫秒级的时钟，人眼也看不到任何变化超过72秒的任何东西，所以你也可以更加合理地更新你的时钟〜每秒25次没有人能够看到差异。它仍然是一个我不想使用的网站，因为它会减慢我的浏览器速度，但至少它不会冻结。

使用不具有2和5个因子的数字将确保显示的最后一位数字不会经常重复

setInterval("showClock()", 37);

编辑：

正如影子向导所指出的那样，你的代码中存在一个更大的问题，就是你每次更新时钟都会调用setInterval ，它会尽可能快地设置很多计时器。您应该只调用该函数一次，例如在onload事件中：

<body onload="startClock()">

然后添加startClock函数：

function startClock() { setInterval("showClock()", 1); }

并从setInterval删除showClock来电：

function showClock() {
    var now = new Date;

    time = fill(now.getHours()) + " : " + fill(now.getMinutes()) + " : " + fill(now.getSeconds()) + " : " + fill(now.getMilliseconds());

    document.getElementById("clock").innerHTML = time;

    // remove! //setTimeout("showClock()",1);
}

我仍然建议您不需要经常更新您的网页，但那是您的电话。

HTML body onload（）属性

4 个答案: