在同一視圖中調用另一種方法

Question

我製作了一個使用兩分鐘JavaScript定時器的簡單遊戲。我可以在不使用主幹的情況下使JavaScript定時器工作。代碼是在工作計時器的底部，這裏是它的小提琴http://jsfiddle.net/mjmitche/hDRjR/19/

但是，一旦我嘗試計時器代碼到一個主幹視圖內的幾個不同的方法，我得到一個錯誤取決於如何一個密鑰的方法，displayTime，代碼被定義

步驟：

1）I創建一個新的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); 


    }, 

如果displayTime從setInterval的稱爲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/

變種displayTime =函數（）{ 變種分鐘= Math.floor（secondsRemaining/60）; var seconds = secondsRemaining - （minutes * 60）; if（seconds < 10）seconds =「0」+ seconds; var time = minutes +「：」+ seconds; $（'＃timer'）。html（time）; }; $（'＃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();