Flash Canvas HTML5 Javascript 中的倒数时钟计时器

Question

在 javascript (createJS) 中为 Flash Canvas HTML5 进行简单倒计时，我收到以下错误：

file_Canvas.js:318 Uncaught TypeError: Cannot read property 'dtxt_days' of undefined

该错误特定于this.mc_counter.dtxt_days.text = days; 行及其下方的 3。

我做错了什么？

这是 js：

this.mc_counter.dtxt_days.text = "";
this.mc_counter.dtxt_hours.text = "";
this.mc_counter.dtxt_mins.text = "";
this.mc_counter.dtxt_secs.text = "";

var end = new Date('10/19/2015 10:1 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    this.days = Math.floor(distance / _day);
    this.hours = Math.floor((distance % _day) / _hour);
    this.minutes = Math.floor((distance % _hour) / _minute);
    this.seconds = Math.floor((distance % _minute) / _second);

    this.mc_counter.dtxt_days.text = days;
    this.mc_counter.dtxt_hours.text = hours;
    this.mc_counter.dtxt_mins.text = minutes;
    this.mc_counter.dtxt_secs.text = seconds;
}

    
timer = setInterval(showRemaining, 1000);

console.log(timer);

Answer 1

您正在将错误代码行中的变量分配给不存在的东西。

this.days != days

相反，请确保您获得了刚刚分配给 this 的属性。

this.mc_counter.dtxt_days.text = this.days;
this.mc_counter.dtxt_hours.text = this.hours;
this.mc_counter.dtxt_mins.text = this.minutes;
this.mc_counter.dtxt_secs.text = this.seconds;

另外 - this 并不是指您认为它所做的事情。由于showRemaining是一个函数，所以它里面的代码中的this实际上是指showRemaining。有几种方法可以解决这个问题。这里可以说是最简单的一个：

var self = this;
function showRemaining() {
   self.days = ...
   self.mc_counter.dtxt_days.txt = ...
}

这只是存储对外部this 的引用。或者，您可以执行以下操作：

timer = setInterval(showRemaining.call(this), 1000);

将showRemaining 内部的this 分配给外部this。