Javascript HTML正文onload（）属性_Javascript_Html

Javascript HTML正文onload（）属性

javascript html

Javascript HTML正文onload（）属性,javascript,html,Javascript,Html,我编写了以下函数： 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 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);
}

到

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

我知道函数

setTimeout（）

将执行分配的函数一次，函数

setInterval（）

将执行分配的函数几次

我有两个问题：

body

的

onload

属性如何工作？为什么函数

setInterval（）

在此代码中不工作

更新：我想显示一个显示毫秒的时钟。

onload

属性是否重复该函数？

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

更多信息请参见此处：

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

更多信息请参见此处：

这是setInterval的语法：

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

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

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

历史上，浏览器实现setTimeout（）“钳制”：连续 setTimeout（）调用的延迟小于“最小延迟”限制必须至少使用最小延迟。最小延迟， DOM_MIN_TIMEOUT_值为4 ms（存储在Firefox的首选项中： dom.min\u timeout\u value），具有5ms的dom\u钳位\u超时\u嵌套级别

事实上，4ms是由HTML5规范指定的，并且在所有领域都是一致的 2010年及以后发布的浏览器。之前的版本（Firefox 5.0）/ Thunderbird 5.0/SeaMonkey 2.2），嵌套超时时间为10毫秒

资料来源：

除了上面提到的最小延迟之外，你应该问自己为什么每毫秒运行一次时钟函数。你最好每1000ms=1秒做一次

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

这是setInterval的语法：

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

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

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

资料来源：

除了上面提到的最小延迟之外，你应该问自己为什么每毫秒运行一次时钟函数。你最好每1000ms=1秒做一次

如果要显示毫秒，则应找到其他显示方式，因为最小延迟仍然有效。

浏览器不应冻结。去掉

标签中的

onload

，并将其放在页面

部分：

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;
    }
}

这将使它更快更优雅

浏览器不应冻结。去掉

标签中的

onload

，并将其放在页面

部分：

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;
    }
}

这将使它更快更优雅

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

在我的电脑上，Chrome在屏幕上重新绘制一个3x16区域所需的时间约为300毫秒。要进行1000次这样的更新，需要5分钟。你想马上做。显然，您对硬件的要求过高

如果你真的需要在webbrowser中有那么高的性能（好像…），你应该编写一个本机插件，但我怀疑你是否能够每秒重画屏幕的一部分那么多次（至少你需要一个1000hz的显示器，这样做是愚蠢的）

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

使用不含2和5因子的数字将确保显示的最后一个数字不会重复太多

setInterval("showClock()", 37);

编辑：

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

<body onload="startClock()">

并从

showClock

中删除

setInterval

调用：

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);
}

我仍然建议您不需要经常更新页面，但这是您的决定。

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

如果你真的需要在webbrowser中有那么高的性能（好像…），你应该编写一个本机插件，但我怀疑你是否能够每秒多次重画屏幕的一部分（至少你需要一个1000hz的显示器，这太傻了）。

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

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);
}