使用 JavaScript 在 Adob​​e Animate 中意外重新分配变量

Question

我最近开始玩 Adob​​e Animate + JavaScript。 我试图在每个滴答声中增加一个变量。 在 Adob​​e Animate 项目中，在某个时候我在事件循环内重新分配变量时遇到了意外行为：

myVar = 0;

createjs.Ticker.addEventListener('tick', mainLoop.bind(this));

function mainLoop() {
    myVar += 1;
    this.mytext.text = myVar; // mytext is a text box pre-drawn on canvas
}

这会产生意外的增量，在文本框中看到：

如果myVar使用let或var声明，则结果值在 1 和 2 之间波动

创建新文档后，问题消失了。 类似的代码也可以在 jsfiddle 中按预期工作： https ://jsfiddle.net/cdf5utmx/2/。

我不确定文档是如何变得“混乱”的，因为同时更改的代码之外的唯一设置是帧速率设置。

我想知道是否有人遇到过类似的问题，因为每次都创建一个新文档是不切实际的。

我在 Windows 10、Chrome 91.0 浏览器上使用 Adob​​e Animate 21.0。

我习惯于使用 Python 和 JavaScript 新手，这意味着我可能不了解 JavaScript 中变量分配和作用域的一些基本知识。 这也很可能是 Adob​​e Animate 特定的问题

回答：正如Lanny指出的那样，该问题与在多个帧而不是一个帧中运行的代码有关

Answer 1

没有看到更多代码，我不确定，但看起来您可能会多次运行您的代码。 如果您在 Anime 的框架脚本中有上面的代码块，那么它可以在每次框架运行时执行。 在那里抛出一个控制台登录来确认它。 如果有多于一帧，Adobe Animate 将默认循环帧时间线。

一种典型的方法是将该代码移到 Animate 之外，并移到它可以运行一次的主 HTML 或 JavaScript 文件中。 或者，您可以将代码放在一个块中以确保它只运行一次：

var runOnce = false;

if (!runOnce) {
    runOnce = true;
    var myVar = 0;
    
    createjs.Ticker.on('tick', mainLoop, this);
    
    function mainLoop() {
        myVar += 1;
        this.mytext.text = myVar; // mytext is a text box pre-drawn on canvas
    }

}

我还展示了on()的用法，它提供了一个范围参数（ docs ）