CreateJS不会在动画中每秒更新一次动态文本框HTML 5 Canvas

Posted 2023-05-08

【中文标题】CreateJS不会在动画中每秒更新一次动态文本框HTML 5 Canvas

【英文标题】：CreateJS not updating dynamic textbox every second HTML 5 Canvas in animate

【发布时间】：2017-07-22 17:18:03

【问题描述】：

在下面的代码中，我正在运行一个简单的计时器脚本，它基本上从 30 秒倒计时到 0。我想要做的是让当前秒显示在舞台上。

this.stop();

//COUNTDOWN TIMER
var minute = 0;
var second = 30;

var clock = setInterval(function() 
    second = second -1;
    if(minute == 0 && second == 0)
        clearInterval(clock)
    


        //If the seconds are less than 10, add a 0
        if(second < 10)
        console.log("0"+minute+":0"+second+"");
        else
        //Normal
        console.log("0"+minute+":"+second+"");

        

        this.text = second;
        this.myTimer1.myTimer2.text = second


, 1000);

但是，当倒计时按预期工作和运行时，我不断收到错误消息 myTimer2 未定义。我真的很难找到答案。 myTimer1 是影片剪辑的实例名称 myTimer2 是影片剪辑中动态文本框的实例名称

任何帮助将不胜感激。

谢谢

【问题讨论】：

您确定在myTimer1 中定义了myTimer2 子（和变量）吗？你有机会发布lib js吗？区间内的this 是什么？该函数很有可能在全局范围内被调用，因此 this 将是 Window。

【参考方案1】：

如果您看到此错误：Cannot read property 'myTimer2' of undefined，那么这只是范围问题。

如果您将函数作为参数传递给setInterval，它将在全局范围内调用。在同一范围（秒、分钟等）中定义的任何变量仍然可用，但 this 变为全局变量。

有几种方法可以解决函数作用域：

---

一个常见（且简单）的解决方法是在本地范围内为this 定义一个别名。该函数仍然在全局范围内调用，但您现在拥有了对要引用的范围的引用。通常您会看到带有_this 或that 变量的代码示例：

var _this = this;
setTimeout(function() 
  _this.doSomething(); //
, duration);

另一种方法是绑定方法。一些较旧的浏览器不支持这一点（有很多 polyfills），但如果您使用的是 CreateJS，那么旧的浏览器支持就不是问题了。

setTimeout(function() 
  this.doSomething();
.bind(this), duration);

希望对您有所帮助。想了解更多，有plenty of articles on scope in javascript。