技术疑问：数组赋值自动执行函数，为何覆盖onclick触发规则？

嘿，我一眼就看出问题所在了——你在给数组赋值的时候，不小心直接执行了函数，而不是把函数本身存进去！

为什么函数会自动执行？ #

当你写 simonArr[0] = red(); 时，JavaScript 会立即执行 red() 这个函数（因为后面跟了括号），然后把函数的返回值（这里是 undefined，因为你的函数没有返回任何内容）存入数组。这就导致页面一加载，所有颜色函数都直接跑了一遍，完全不等你点击按钮触发 onclick 事件。

怎么修复？ #

你需要把函数引用而不是函数调用结果存入数组，也就是去掉函数名后面的括号：

var simonArr = [];
simonArr[0] = red; // 存函数本身，不执行
simonArr[1] = blue;
simonArr[2] = green;
simonArr[3] = yellow;

这样数组里存储的是每个函数的对象引用，只有当你主动调用它们（比如 simonArr[0]();）时，函数才会执行。

额外优化建议 #

你的 red() 函数用了 setInterval，这会每隔4秒重复把按钮透明度改成0.25，这可能不是你想要的“闪烁”效果。建议换成 setTimeout，让按钮在短暂变暗后恢复原样：

function red(){
  const btn = document.getElementById('red1');
  btn.style.opacity = ".25";
  setTimeout(() => {
    btn.style.opacity = "1"; // 恢复原透明度
  }, 500); // 保持半透明500毫秒
}

// 其他颜色函数同理修改

完整修正后的代码示例 #

<body>
  <h2 id="clickNumber">0</h2>
  <button id="red1" onclick="red()"></button>
  <button id="blue1" onclick="blue()"></button>
  <button id="green1" onclick="green()"></button>
  <button id="yellow1" onclick="yellow()"></button>

  <script>
    var simonArr = [];
    simonArr[0] = red;
    simonArr[1] = blue;
    simonArr[2] = green;
    simonArr[3] = yellow;

    function red(){
      const btn = document.getElementById('red1');
      btn.style.opacity = ".25";
      setTimeout(() => {
        btn.style.opacity = "1";
      }, 500);
    }

    function blue(){
      const btn = document.getElementById('blue1');
      btn.style.opacity = ".25";
      setTimeout(() => {
        btn.style.opacity = "1";
      }, 500);
    }

    function green(){
      const btn = document.getElementById('green1');
      btn.style.opacity = ".25";
      setTimeout(() => {
        btn.style.opacity = "1";
      }, 500);
    }

    function yellow(){
      const btn = document.getElementById('yellow1');
      btn.style.opacity = ".25";
      setTimeout(() => {
        btn.style.opacity = "1";
      }, 500);
    }
  </script>
</body>
</html>

这样修改后，点击按钮会触发对应函数的闪烁效果，数组里的函数也只会在你主动调用时执行，不会再页面加载时自动跑起来啦！

内容的提问来源于stack exchange，提问作者Damian Mitchell