如何使按钮更具反应性答案

【问题标题】：How to make the button more reactive如何使按钮更具反应性
【发布时间】：2020-06-04 17:19:18
【问题描述】：

如果我点击按钮的速度太快，那么它就不会像没有注册点击一样执行。有什么办法可以让这个简单的代码反应更好？或者这几乎是它的程度？任何建议都会对我在未来的小型项目中有所帮助。

// function named change_color which contains color array and random selection
function change_Color(){
    // creating color variable equal to the color array
    var color = ["blue", "red", "green", "yellow"];
    // created random variable targeting the color variable saying to choose
    // a random color from the array
    var random = color[Math.floor(Math.random()*color.length)];
    // targets the the div element with id wrapper, telling it to use the
    // random variable
    document.getElementById("wrapper").style.backgroundColor = random;
}

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        padding: 10px;
        background: orange;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 2rem;
        transition: .5s ease;

        &:hover {
            box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }
        &:focus {
            outline: 0;
            color: skyblue;
        }
    }
    

}

<body>
    <div id="wrapper">
        <button onclick="change_Color()">Click me!</button>
    </div>
    <script src="JS/style.js"></script>
</body>

【问题讨论】：

您还可以连续多次获得完全相同的颜色（几率为 1/4），这使得事件看起来好像没有注册。会是这样吗？

标签： javascript performance button colors reactive

【解决方案1】：

此时您受硬件层的支配，但您可以将不需要在函数中的任何代码移出函数，从而减少处理量。同样，您可能看不到任何改进，因为click 触发了超出 JavaScript 运行时边界的操作，而浏览器的代码（依次调用操作系统代码）接下来运行。

// The following two lines don't need to be invoked 
// over and over and could potentially speed things
// up by not being in the function.
var color = ["blue", "red", "green", "yellow"];
let wrapper = document.getElementById("wrapper");

// function named change_color which contains color array and random selection
function change_Color(){
    // There's no reason for a variable if you only use its value once:
    wrapper.style.backgroundColor = color[Math.floor(Math.random()*color.length)];
}

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        padding: 10px;
        background: orange;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 2rem;
        transition: .5s ease;

        &:hover {
            box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }
        &:focus {
            outline: 0;
            color: skyblue;
        }
    }
    

}

<body>
    <div id="wrapper">
        <button onclick="change_Color()">Click me!</button>
    </div>
    <script src="JS/style.js"></script>
</body>

【讨论】：

只是为了澄清，因为我是新手。您可以将颜色设置为全局，它仍然可以使用该函数，并且通过将随机方法设置为 wrapper.style 将减少代码并可能减少执行时间？
@A.D.Schmidt 由于您的颜色数组不会改变，因此没有理由在每次单击按钮时重新声明 Array 对象并重新填充它。类似地，每次单击按钮时都无需在文档中搜索以查找包装器，因此只需找到它一次，然后尽可能多地使用该引用。最后，一个变量用于临时保存信息。如果您只打算使用一次该信息，那么您实际上不需要设置一个地方来保存它。综上所述，我认为您实际上不会看到太大的改进，因为...
@A.D.Schmidt ...正如我在回答中提到的那样，您正在做的事情的某些方面超出了您或 JavaScript 的控制范围。