我在 jshint 上仔细检查和测试了语法错误等。我还将我的代码与创建相同时钟的其他人进行了比较，但没有发现任何会导致我的时钟崩溃的差异。我不明白是什么导致了这个问题。
$(document).ready(function(){
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var miridiem = "AM";
var clockDiv = document.getElementById('clock');
if(seconds < 10) {
seconds = "0" + seconds
}
if(minutes < 10) {
minutes = "0" + minutes
}
if (hours > 12) {
hours = hours - 12
miridiem = "PM"
}
if (hours === 0) {
hours = 12
}
clockDiv.textContent = hours + ":" + minutes + ":" + seconds + " " + miridiem;
setInterval(displayTime, 1000);
}
displayTime();
});<body>
<div id="clock"></div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
</body>最佳答案
您只是误解了 setInterval 和 setTimeout 的用法。
正如一些评论者所提到的，您只需将当前的实现更改为使用 setTimeout，它就会运行良好。
但是，在我看来，最好的解决方案是更改代码的工作方式，以便 setInterval 正常工作:
$(document).ready(function(){
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var miridiem = "AM";
var clockDiv = document.getElementById('clock');
if(seconds < 10) {
seconds = "0" + seconds
}
if(minutes < 10) {
minutes = "0" + minutes
}
if (hours > 12) {
hours = hours - 12
miridiem = "PM"
}
if (hours === 0) {
hours = 12
}
clockDiv.textContent = hours + ":" + minutes + ":" + seconds + " " + miridiem;
}
displayTime();
setInterval(displayTime, 1000);
});
我觉得这样更好，因为:
- 这就是
setInterval的设计目的:以特定的时间间隔反复执行相同的操作。 - 手动调用
setTimeout来重置计时器会使您面临一些时钟偏差；如果您的displayTime在设置超时之前运行需要一毫秒，那么在 1000 秒后您可能会停止大约 1 秒。 - 一个名为
displayTime()的函数听起来好像它所做的只是显示时间——没有任何迹象表明它还会产生长期的副作用。如果在该方法之外设置计时器，关注点分离会感觉更好。 displayTime()的效果在不产生异步副作用时更容易独立测试。
关于javascript - 为什么我的 javascript 时钟会在一分钟后崩溃？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37767752/