在JavaScript中，如何修复元素显示和变量创建之间的初始差异

我试图测量方框分隔和用户单击方框的时间之间的时间，因此我做了以下操作：

JavaScript
身体{
背景：灰色；
}
#盒子{
宽度：100px；
高度：100px；
背景：红色；
可见性：“隐藏”；
}
window.onload=函数（）{
var clickedTime；//存储单击框的时间
var createdTime；//存储创建框的时间
var reactionTime；//框创建和框单击之间的秒数
函数出现（）{
//此功能用于使框显示
setTimeout（函数（）{
document.getElementById（“box”）.style.visibility=“可见”；
createdTime=Date.now（）；
log（“createdTime:+createdTime”）；
}，Math.random（）*5000）；
}
document.getElementById（“box”）.onclick=function（）{
//这是为了隐藏该框，使其显示并计算反应时间
单击时间=日期。现在（）；
console.log（“clickedTime:+clickedTime”）；
反应时间=（点击时间-创建时间）/1000；
console.log（“reactionTime:+reactionTime”）；
警报（反应时间）；
this.style.visibility=“hidden”；
出现（）；
}
出现（）；
}

在CSS中，更改以下内容：

visibility: "hidden";

……为此：

visibility: hidden;

否则，元素开始可见，因此第一次单击时可能没有初始化

createdTime

片段：

window.onload=function（）{
var clickedTime；//存储单击框的时间
var createdTime；//存储创建框的时间
var reactionTime；//框创建和框单击之间的秒数
函数出现（）{
//此功能用于使框显示
setTimeout（函数（）{
document.getElementById（“box”）.style.visibility=“可见”；
createdTime=Date.now（）；
log（“createdTime:+createdTime”）；
}，Math.random（）*5000）；
}
document.getElementById（“box”）.onclick=function（）{
//这是为了隐藏该框，使其显示并计算反应时间
单击时间=日期。现在（）；
console.log（“clickedTime:+clickedTime”）；
反应时间=（点击时间-创建时间）/1000；
console.log（“reactionTime:+reactionTime”）；
警报（反应时间）；
this.style.visibility=“hidden”；
出现（）；
}
出现（）；
}

正文{
背景：灰色；
}
#盒子{
宽度：100px；
高度：100px；
背景：红色；
可见性：隐藏；
}