0

我制作了一个使用两分钟 JavaScript 计时器的简单游戏。我可以在不使用主干的情况下让 javascript 计时器工作。代码位于工作计时器的底部，这是它的一个小提琴http://jsfiddle.net/mjmitche/hDRjR/19/

但是，一旦我尝试将计时器代码转换为 Backbone 视图中的几个不同方法，我就会收到一个错误，具体取决于关键方法 displayTime 代码的定义方式

脚步：

1）我创建一个新的clockView并将其保存到一个变量clock_view

var clock_view    = new ClockView({ model: game});

在时钟视图的初始化程序中，我设置了计时器代码使用的这些变量

var totalWait = 120;
var secondsRemaining = totalWait;
var hasFocus = true;
var hasJustFailed = false;

startClock 方法从其他地方触发

 this.model.bind("gameStartedEvent", this.startClock, this);

startClock 使用 setInterval 每秒调用一次 displayTime 方法。根据 displayTime 的编码方式 [a) displayTime(), b) this.displayTime(), c) clock_view.displayTime() ]，displayTime 会触发不同的错误。

startClock: function(){
      console.log("start clock");

      setInterval(function(){
      this.secondsRemaining -= 1;
      console.log("working");
      displayTime();  //uncaught reference error: displayTime is not defined
      this.displayTime(); //Uncaught TypeError: Object [object Window] has no method 'displayTime' 
      clock_view.displayTime();// `display time gets called but triggers NAN`
      if(secondsRemaining == 0) $('#timer').fadeOut(1000);
      }, 1000);


    },

如果从 setInterval 调用 displayTime，因为displayTime()它说它没有定义。如果我执行 this.displayTime()，我会得到一个对象窗口没有方法。如果我把它称为clock_view.displayTime()，它会触发一个NAN错误，我认为这可能是因为在初始化程序displayTime中定义变量的方式是直接在startClock下面定义的

displayTime:  function () {
        var minutes = Math.floor(secondsRemaining / 60);
        var seconds = secondsRemaining - (minutes * 60);
        if (seconds < 10) seconds = "0" + seconds;
        var time = minutes + ":" + seconds;
        $('#timer').html(time);
    },

更新

这是 Backbone 格式的整个 ClockView 的小提琴，尽管它不起作用，因为它缺少程序的其他部分（例如触发事件的模型）。我包含它只是为了使问题更具可读性

http://jsfiddle.net/mjmitche/RRXnK/85/

原始工作时钟代码http://jsfiddle.net/mjmitche/hDRjR/19/

var displayTime = function () { var minutes = Math.floor(secondsRemaining / 60); var seconds = secondsRemaining - (分钟 * 60); 如果（秒<10）秒=“0”+秒；var time = 分钟 + ":" + 秒；$('#timer').html(时间); }; $('#timer').css('marginTop', 0);

setInterval(function(){
    secondsRemaining -= 1;
    displayTime();
    if(secondsRemaining == 0) $('#timer').fadeOut(1000);
}, 1000);
4

1 回答 1

2

这应该有效。要点是，如何在View.

HTML：

<div id="view">
    <div id="timer"> 
        <span class="time">2:00</span>
    </div>
    <div id="options">
        <input type="button" class="action_button" value="New Game" id="new_game">
    </div>
</div>

看法：

var ClockView = Backbone.View.extend({
el: '#view',
initialize: function () {
    /** Define your variables in this View */
    this.totalWait = 120;
    this.secondsRemaining = this.totalWait;
    this.hasFocus = true;
    this.hasJustFailed = false;
},
events: {
    'click #new_game' : 'startClock' /** The button starts the clock */
},
startClock: function () {
    console.log("start clock");
    var self = this; /** Save 'this' to a local variable */
    setInterval(function () {
        self.secondsRemaining -= 1;

        self.displayTime();
        if (self.secondsRemaining == 0) self.$('#timer').fadeOut(1000);
    }, 1000);
},
displayTime: function () { 
        var minutes = Math.floor(this.secondsRemaining / 60);
        var seconds = this.secondsRemaining - (minutes * 60);
        if (seconds < 10) seconds = "0" + seconds;
        var time = minutes + ":" + seconds;
        this.$('#timer').html(time);
    },
});

var clock_view = new ClockView();
于 2013-02-02T01:17:38.537 回答