Javascript 如何使按钮更具反应性

如果我点击按钮太快，那么它不会像没有注册点击一样执行。有什么方法可以让这个简单的代码反应得更好吗？或者说这差不多就是问题的严重程度？ 任何建议都将有助于帮助我在未来的小项目，如这

//名为change\u color的函数，包含颜色数组和随机选择
函数更改颜色（）{
//创建等于颜色数组的颜色变量
var color=[“蓝色”、“红色”、“绿色”、“黄色”]；
//创建了随机变量，目标是要选择的颜色变量
//数组中的随机颜色
var random=color[Math.floor（Math.random（）*color.length）]；
//将id为wrapper的div元素作为目标，告诉它使用
//随机变量
document.getElementById（“包装器”）.style.backgroundColor=random；
}

正文{
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
宽度：100%；
高度：100vh；
背景色：天蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
钮扣{
填充：10px；
背景：橙色；
颜色：白色；
边界：无；
边界半径：10px；
字号：2rem；
过渡：放松；
&：悬停{
盒影：0 4px 3px 0px rgba（255,255,255,0.8）；
光标：指针；
}
&：焦点{
大纲：0；
颜色：天蓝色；
}
}
}

点击我！

此时，您将任由硬件层摆布，但您可以将不需要在函数中的任何代码移出函数，从而减少处理量。同样，您可能看不到任何改进，因为单击

会触发JavaScript运行时边界之外的操作，而浏览器的代码（反过来调用操作系统代码）将在下一步运行


//不需要调用以下两行
//一次又一次，可能会加速事情的发展
//由于不在该功能中而被激活。
var color=[“蓝色”、“红色”、“绿色”、“黄色”]；
让wrapper=document.getElementById（“wrapper”）；
//名为change_color的函数，包含颜色数组和随机选择
函数更改颜色（）{
//如果只使用变量的值一次，则没有理由使用变量：
wrapper.style.backgroundColor=color[Math.floor（Math.random（）*color.length）]；
}
正文{
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
宽度：100%；
高度：100vh；
背景色：天蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
钮扣{
填充：10px；
背景：橙色；
颜色：白色；
边界：无；
边界半径：10px；
字号：2rem；
过渡：放松；
&：悬停{
盒影：0 4px 3px 0px rgba（255,255,255,0.8）；
光标：指针；
}
&：焦点{
大纲：0；
颜色：天蓝色；
}
}
}

点击我！
您还可以连续多次获得完全相同的颜色（机会1/4），这使事件看起来好像没有注册。可能是这样吗？我只是想澄清一下，因为我对这一点还不熟悉。您可以将颜色设置为全局颜色，它仍然可以与函数一起工作，并且通过将random方法设置为wrapper.style可以减少代码和可能的执行时间？@a.D.Schmidt由于颜色数组没有更改，因此没有理由在每次单击按钮时重新声明数组对象并重新填充它。类似地，无需在每次单击按钮时搜索文档以查找包装器，因此只需查找一次，然后尽可能频繁地使用该引用即可。最后，变量用于临时保存信息。如果您只打算使用该信息一次，那么您实际上不需要设置一个位置来保存它。说了这么多，我认为你实际上不会看到多大的改善，因为…。@A.d.Schmidt。。。正如我在回答中提到的，您正在做的事情中有一些方面超出了您或JavaScript的控制范围。