0

2分のJavaScriptタイマーを使った簡単なゲームを作っています。バックボーンを使用せずにJavaScriptタイマーを動作させることができます。コードは動作中のタイマーの下部にあり、ここにそのフィドルがありますhttp://jsfiddle.net/mjmitche/hDRjR/19/

ただし、バックボーンビュー内のいくつかの異なるメソッドにタイマーコードを入れようとすると、キーメソッド、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を使用して1秒ごとに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);
    },

アップデート

これは、バックボーン形式の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（seconds <10）seconds ="0"+秒; var time = minutes + "：" + seconds; $（'＃timer'）。html（time）; }; $（'＃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 に答える