如何实现onmouseover触发元素多次变色？

鼠标悬停在id为rainbow的<h1>元素上时，期望每500毫秒改变一次文字颜色，但实际仅在悬停时变色一次，setInterval仅触发changeColor函数一次。

原代码 #

JavaScript #

var color2;
var color3;
var color1;
var interval;
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id){
interval = setInterval(changeColor(id),500);

}
function stopColorEverySecond(){
    clearInterval(interval)
}
 function changeColor(id){
color1 = getRandomInt(255);
color2 = getRandomInt(255);
color3 = getRandomInt(255);
document.getElementById(id).style = "color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")";
}

HTML #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()">
 When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover. 
</h1>
</body>
</html>

问题根源 #

setInterval(changeColor(id),500)这行代码里，你直接调用了changeColor(id)——加括号会让函数立即执行，并把执行结果（这里是undefined）传给setInterval，所以定时器只会触发这次立即执行的调用，之后不会再重复运行。正确的做法是给setInterval传递一个函数引用，而非函数执行结果。

修复方案 #

方法1：用匿名函数包裹调用 #

修改ColorEverySecond函数，用匿名函数包裹changeColor的调用，确保每次定时器触发时才执行函数：

function ColorEverySecond(id){
  interval = setInterval(function() {
    changeColor(id);
  }, 500);
}

方法2：用bind绑定参数 #

也可以用Function.bind()创建一个绑定了id参数的函数引用，传给setInterval：

function ColorEverySecond(id){
  interval = setInterval(changeColor.bind(null, id), 500);
}

优化后的完整代码 #

JavaScript

var interval;
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id){
  interval = setInterval(function() {
    changeColor(id);
  }, 500);
}

function stopColorEverySecond(){
  clearInterval(interval);
}

function changeColor(id){
  const color1 = getRandomInt(255);
  const color2 = getRandomInt(255);
  const color3 = getRandomInt(255);
  document.getElementById(id).style.color = `rgb(${color1}, ${color2}, ${color3})`;
}

（注：顺便优化了变量声明方式，用const替代全局变量，且直接修改style.color而非整个style属性，更符合代码规范）

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()">
  When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover. 
</h1>
</body>
</html>

内容的提问来源于stack exchange，提问作者Mother Thief