Question

我正在尝试在网页上运行两个JavaScript“onload”函数：可视化计时器和自动刷新功能。我已经在我的网页中实现了这两个，但是虽然计时器运行，但除非我从脚本中删除了可视化计时器功能，否则自动刷新功能将不会运行。

以下是网页的代码：

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
<TITLE>test</TITLE>
</head>
<body onload="JavaScript:timedRefresh(15000); timedText();">

<script>
window.onload = timedText;
function timedText() {
var txt = document.getElementById('txt'),
 counter = 15;
var timer = setInterval(function () {
 if(counter === 0) return clearInterval(timer);
 txt.value = counter + " seconds";
 counter--;
}, 1000);
}
</script>
<input type="text" id="txt" />

</body></HTML>

非常感谢任何帮助解决这个问题。

Answer 1

问题是第二个问题覆盖了第一个问题。这就是您应该使用addEventListener添加事件。

window.addEventListener('load', timedText, false);
window.addEventListener('load', function(){timedRefresh(15000);}, false);

如果您需要支持较旧的IE，则需要查看attachEvent

但是看看代码为什么你要运行两个setTimeout时你需要做的就是当它达到零时调用重定向。

Answer 2

尝试进行一些小改动：在timedRefresh()函数内调用window.onload's timetext()而不是在body onload中。

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
<TITLE>test</TITLE>
</head>
<body>

<script>
window.onload = timedText;
function timedText() {
var txt = document.getElementById('txt'),
 counter = 15;
timedRefresh(15000);
var timer = setInterval(function () {
 if(counter === 0) return clearInterval(timer);
 txt.value = counter + " seconds";
 counter--;
}, 1000);
}
</script>
<input type="text" id="txt" />

</body></HTML>

Answer 3

您可以使用addEventListener方法添加多个onload事件，如下所示：

window.addEventListener("load", timedText, false);
window.addEventListener("load", timedRefresh(15000), false);

function timedText() {
        var txt = document.getElementById('txt'),
            counter = 15;
        var timer = setInterval(function() {
            if (counter === 0) return clearInterval(timer);
            txt.value = counter + " seconds";
            counter--;
        }, 1000);
}

function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",
    timeoutPeriod);
}

您可以找到有关addEventListener here的更多信息。

此处a working codepen。

运行2 JavaScript＆＃34; onload＆＃34;功能

3 个答案: