Javascript-动画在多次运行时闪烁

我创建了一个非常简单的边界高亮动画，效果非常好。但是当你在它已经有动画的时候把鼠标移到它上面时，它完全疯了

function borderHighlight (x) {
var start = 0;
var end = 255;
var current = 0;
var boo = 0;
var id = setInterval (frame, 5);

function frame() {
    if (current < end && boo == 0) {
        x.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        x.parentNode.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        current ++;
    } else if (current == end && boo == 0) {
        boo = 1;
    } else if(current >= start && boo == 1) {
        x.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        x.parentNode.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        current --;
    } else {
        clearInterval(id);
    }
  } 
}

函数边框高亮显示（x）{
var start=0；
var-end=255；
无功电流=0；
var-boo=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（当前=start&&boo==1）{
x、 style.borderColor=“rgb（“+current+”、“+current+”、“+current+”）；
x、 parentNode.style.borderColor=“rgb（“+current+”，“+current+”，“+current+”）；
当前--；
}否则{
清除间隔（id）；
}
} 
}

如果你想看到这一切的行动，这里的网址

我知道这是一个与这里其他人类似的话题，但我还没有找到一个适合我具体情况的答案（或者至少我不理解它是如何适合的）

---

提前感谢您提供的任何帮助或建设性意见。

首先，我建议您使用jquery。您的代码将更加交叉和简单

当用户将鼠标移到div上时，您的函数会运行多次

最简单的修复方法是将函数调用置于

mouseenter

事件，而不是

mouseover

但正确的方法是重写函数，并在启动动画之前检查此特定div的动画是否已启动

在函数的一开始，请输入以下内容：

if (x.hasAttribut('playing')) return; //if animation is playing no need to restart
x.setAttribute('playing', playing); //we put temporary attribute stating, that animation is playing

---

并且不要忘记在动画完成时删除attrinbute。

您需要在开始时保留间隔id和

clearInterval（id）

<代码>x.interval=setInterval（第5帧）。。。clearInterval（x.interval）；“去盎司”模式可避免同时出现许多动画。。。（对无效id调用clearInterval不会造成任何伤害）