javascript - 为什么对象变量没有增加？

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, etc...

但我需要遵循顺序:

1, 2, 3, 4, 5, etc...

fiddle :https://jsfiddle.net/6wyu8soj/

Answer 1

您正在使用可变数据结构 (self.level++;) 并在每个 keypress 上添加新的 keypress 事件，这导致 O(n ^2) 性能以及这个奇怪的错误。

首先，您应该摆脱对 Start

的递归异步调用

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

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

这将解决您当前的问题，如您所见here

为避免将来出现类似问题，您可以查看一些不可变数据结构，例如 immutable.js .