在同一视图中调用另一个方法

Question

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

然而，一旦我在Backbone视图中尝试将定时器代码转换为几种不同的方法，我就会出现错误，具体取决于键方法，displayTime，代码的定义方式

步骤：

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

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

在clockview的初始化程序中，我设置了定时器代码

使用的这些变量

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）;         if（秒＆lt; 10）秒=“0”+秒;         var time = minutes +“：”+ seconds;         $（ '＃计时器'）HTML（时间）;     };     $（'＃timer'）。css（'marginTop'，0）;

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

Answer 1

这应该有效。要点是，如何在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();