Javascript 没有立即执行，延迟到页面加载后一秒

Question

在快速拼凑一个时钟应用程序以测试我在 Heroku 上托管的 Flask 应用程序的 JavaScript 链接能力后，我发现时钟文本没有立即填充 .innerHTML 我的元素。

Javascript:

// This sets our ticker to execute the function once a second.
var myVar = setInterval(function() {
    myTimer();
}, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}

HTML非常简单，就是一个id为“clock”的小h4元素。我也尝试过 document.onload，但无论我尝试什么，网站都会加载一个空元素，然后在大约一秒钟后填充它。

尽管我引起了您的注意，但为什么设置间隔的标准过程将其声明为变量？是否供以后在程序中参考？它会像裸体一样工作吗 setInterval(xxxxx);?

提前致谢！

Answer 1

setInterval 在指定的延迟后运行该函数，例如，如果您想在 window 加载时显示时间，您可以在 window.onload 中调用一次函数。如果你想清除间隔，则需要声明为变量，我添加了一个按钮作为示例。

window.onload = () => {
    myTimer();
}

const btnStop = document.getElementById("btn-stop");
btnStop.addEventListener('click', () => {
  console.log('stopped');
  clearInterval(myInterval);
})


var myInterval = setInterval(function() {
  myTimer();
}, 1000);


function myTimer() {
  var d = new Date();
  document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}

<p id="clock"></p>
<button id="btn-stop">stop</button>

Javascript 没有立即执行，延迟到页面加载后一秒

Javascript not executing immediately, delayed until a second after page load

html

javascript

clock