jQuery对象构造器-方法调用自身

Question

我正在为学校构建一个Jquery游戏的过程中，我试图让create()在函数结束时通过将setTimeout()放在方法运行来回忆它的自我(我使用setTimeout，因为addEnemySpeed是随机生成的，所以它每次都在变化)，但它不工作，方法只运行一次，从被调用启动(smallenemycreate())，但从来没有召回自己?我希望这只是我的疏忽??提前感谢您的帮助。欢呼。

// OBSTACLE OBJECT CONSTRUCTOR //
function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {
  this.type = type;
  this.className = className;
  this.speed = speed;
  this.endX = -160;
  this.startHealth = startHealth;
  this.currentHealth = currentHealth;
  this.damageCause = damageCause;
  this.create = function(type, endX, speed) {
    type = this.type;
    endX = this.endX;
    speed = this.speed;
    var $obstacle = $('<div>');
    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }
    // add correct class name
    $obstacle.addClass(type);
    // add obstacle to playground
    $('#playGround').append($obstacle);
    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({
      x: endX
    }, speed, 'linear', function() {
      $(this).remove();
    });
    setTimeout(this.create,addEnemySpeed);
  };
}
smallEnemy.create()

Answer 1

你试过了吗:

function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {
  this.type = type;
  this.className = className;
  this.speed = speed;
  this.endX = -160;
  this.startHealth = startHealth;
  this.currentHealth = currentHealth;
  this.damageCause = damageCause;
  this.create = function(type, endX, speed) {
    type = this.type;
    endX = this.endX;
    speed = this.speed;
    var $obstacle = $('<div>');
    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }
    // add correct class name
    $obstacle.addClass(type);
    // add obstacle to playground
    $('#playGround').append($obstacle);
    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({
      x: endX
    }, speed, 'linear', function() {
      $(this).remove();
    });
    var that=this; //this is how you can use "this" element in a function
    setTimeout(function(){that.create;},addEnemySpeed);
  };
}
smallEnemy.create()

Answer 2

这不是一个原型。相反，它是一个构造函数。当您创建一个新的障碍时，您将需要调用var foo = new Obstacle(...);

function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {
  // private vars
  var timeout,
      endX = -160;
  // private methods
  function create(addEnemySpeed) {
    var $obstacle = $('<div>');
    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }
    // add correct class name
    $obstacle.addClass(type);
    // add obstacle to playground
    $('#playGround').append($obstacle);
    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({x: endX}, speed, 'linear', function() {
      $(this).remove();
    });
    timeout = setTimeout(create, addEnemySpeed);
  }
  // I added this method so you can stop spawning this obstacle if you want
  function stop() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  }
  // public api (exports)
  this.type           = type;
  this.className      = className;
  this.speed          = speed;
  this.startHealth    = startHealth;
  this.currentHealth  = currentHealth;
  this.damageCause    = damageCause;
  this.create         = create;
  this.stop           = stop;
}

好的，让我们现在使用它

var smallEnemy = new Obstacle(...);
// Spawn a new enemy of this type ever 5 seconds
// Don't forget to pass addEnemySpeed
// (addEnemySpeed was undefined in your code)
smallEnemy.create(5000);

可选:当你想停止刷出时调用stop

smallEnemy.stop();

---

作为旁注，您可能需要考虑定义一些默认值并将对象传递给构造函数。这样你就不需要向构造函数传递6个有序的参数(我认为这相当多)。

new Obstacle({type: "foo", speed: 100});

对于未在对象中设置的任何键返回默认值。如果这是你的选择，你会比我更清楚。我只是想说一下。