爲什麼不增加對象變量？

Question

請幫忙解決問題。

我做了幾個級別的遊戲班。

var Game = function() { 
    self = this; 

    this.myMove = false; 
    this.level = 1; 

    this.Start(); 
}; 

Game.prototype = { 

    Start: function() { 
    this.levelInfo(); 

    $(document).keypress(function(){ 
     self.level++; 
     // game body 
     self.Start(); 
    }); 
    },  

    levelInfo: function() { 
    this.clearScreen(); 
    this.levelDisplay();  
    },   

    levelDisplay: function() { 
    $('<div class="level_label" id="levelLabel">Level: </div> \ 
     <div class="level_value" id="levelValue">' + self.level + '</div>').appendTo('#game'); 
    }, 

    clearScreen: function() { 
    $('#game').html(''); 
    } 

}; 

但運行在比賽結束後，按下屏幕上的輸出中的任何鍵下一級序列：

1，2，4，16，32，等等...

但我需要遵循序列：

1，2，3，4，5，等...

小提琴：https://jsfiddle.net/6wyu8soj/

Answer 1

您正在使用的可變數據結構（self.level++;），並增加新的keypress事件上導致O（N^2）性能與這個陌生的bug沿着每個keypress。

你首先應該擺脫遞歸，異步調用到Start

Start: function() { 
    this.levelInfo(); 

    $(document).keypress(function(){ 
     self.level++; 
     // game body 
     this.levelInfo(); 
    }.bind(this)); 
}, 

這將解決當前的問題，因爲你可以看到here

爲了避免今後發生類似的問題，你可以去看看一些不可變的數據結構，如immutable.js。

Answer 2

已定義之內開始你的按鍵處理，這將繼續創造新的按鍵事件。試試這個：

var Game = function() { 
    self = this; 

    this.myMove = false; 
    this.level = 1; 

    $(document).keypress(function(){ 
     self.level++; 
     // game body 
     self.Start(); 
    }); 

    this.Start(); 
}; 

Game.prototype = { 

    Start: function() { 
    this.levelInfo(); 
    },  

    levelInfo: function() { 
    this.clearScreen(); 
    this.levelDisplay();  
    },   

    levelDisplay: function() { 
    $('<div class="level_label" id="levelLabel">Level: </div> \ 
     <div class="level_value" id="levelValue">' + self.level + '</div>').appendTo('#game'); 
    }, 

    clearScreen: function() { 
    $('#game').html(''); 
    } 

};