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

如何解决Javascript 没有立即执行，延迟到页面加载后的一秒钟

在快速拼凑时钟应用程序以测试托管在 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 非常简单，只是一个小的 h4 元素，id 为“clock”。我也尝试过 document.onload，但无论我怎么尝试，网站都会加载一个空元素，然后在大约一秒钟后填充它。

虽然我引起了您的注意，但为什么设置间隔的标准程序将其声明为变量？是为了以后程序中的参考吗？它可以用作裸体 setInterval(xxxxx); 吗？

先谢谢你！

解决方法

setInterval 在指定的延迟后运行该函数，例如，如果您想在窗口加载时显示时间，您可以在 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>