Javascript 为特定帧数的形状的颜色更改设置动画

我正在使用EaselJS，希望创建一个闪烁的颜色矩形，当按下按钮时，该矩形将闪烁一定次数，显示数组中的随机颜色。它应该在10次彩色闪烁后停止，然后我想提取最终的颜色

到目前为止，我掌握的相关代码是：

var colorArray = ["#FE7B62","#CB2DD3","#F1FD66","#004CE8","#FFD068", "#02A97E"];
square = new createjs.Shape();
square.graphics.beginFill("#000").drawRoundRect(850, 50, 100, 100, 20);

function pushButton(event) {
    square.graphics.inject(animateColor);
}

function animateColor(event) {
    this.fillStyle = colorArray[parseInt(Math.random()*6)];
}

---

这段代码成功地触发了颜色数组中的颜色闪烁，但我不确定在有限的帧数下运行动画的最佳方法是什么。我试着暂停股票行情并在点击按钮后重新启动，但失败了。我还尝试在按钮函数中使用for循环，但这在浏览器中导致了“太多递归错误”。这是我的完整文件链接。

我建议创建一个事件来触发您的操作（XamountOffFrames）。下面是一些可能有帮助的信息的链接

---

我最终没有使用inject函数，而是每次都重新绘制形状，创建了一对计数器和计时器变量，以确保它循环正确的次数

function pushButton() {
    if (timer === false) {
        animate = setInterval(animateColor, 200);
        timer = true;
    }
}

function animateColor() {
    square.graphics.clear();
    displayColor = colorArray[Math.floor(Math.random()*colorArray.length)];
    square.graphics.beginFill(displayColor).drawRoundRect(850, 50, 100, 100, 20);
    counter++;
    if (counter===15) {
        clearInterval(animate);
        counter=0;
        movePlayer(displayColor);
        timer = false;
        return;
    }
}

---

EaselJS有一个内置的eventlistener，可以在单击时触发一个函数，这就是我正在使用的。我的主要问题是限制彩色闪烁的数量，而不是让它不断重复。