Question

任何人都可以告诉我为什么这段代码没有像我期望的那样工作？

function npc(name) {
  this.name = name;
  this.grid = [[0,9], [0,9]];
  this.position = [0,0];
  this.start = setInterval(function(){this.move() }, 1000);
  this.stop = function(){clearInterval(this.start)};
  this.move = function() {
      this.position[0] = this.position[0] + Math.floor(Math.random() * 2);
      this.position[1] = this.position[1] + Math.floor(Math.random() * 2);
      if (this.position[0] > this.grid[0][1] || this.position[1] > this.grid[1[1]) {
      this.position = [0,0];
  };
  console.log(this.name + " moved to " + this.position);  
  }
};

npc();
var bug = new npc("test-name");
bug.start();
bug.stop();

除非我首先执行npc（），否则Bug.start（）不会运行，但即使这样，它也会将未定义的日志记录为名称，并且不会停止使用bug.stop（）

很抱歉，如果这是基本的东西，但我不能自己解决这个问题......

Answer 1

试试这个。

function npc(name) {
  this.name = name;
  this.grid = [[0,9], [0,9]];
  this.position = [0,0];
  var that=this;
  this.start = setInterval(function(){that.move() }, 1000);
  this.stop = function(){clearInterval(this.start)};
  this.move = function() {
      this.position[0] = this.position[0] + Math.floor(Math.random() * 2);
      this.position[1] = this.position[1] + Math.floor(Math.random() * 2);
      if (this.position[0] > this.grid[0][1] || this.position[1] > this.grid[1[1]]) {
      this.position = [0,0];
  };
  console.log(this.name + " moved to " + this.position);  
  }
}

这改变了setInterval中的上下文。

在此函数定义之后呼叫

var bug = new npc("test-name");

它显示了一些控制台O / p之类的测试名称移至1,0 测试名称移至2,0

Answer 2

虽然给定的解决方案正常工作，但还有另一种解决方案使用了引入here的想法：

您只需要像这样更改start变量：

this.start = function() {
setInterval(
  (function(self) {
  return function() {
    self.move();
    }
   })(this), 1000);
}

为了演示如何使用此方法使用start()和stop()函数，我创建了一个fiddle。请注意，您可以通过单击按钮或在setInterval()功能中定义一些条件来停止。

例如，如果你想在第二个位置命中1时停止错误：

this.handle; //To keep timer handle
this.start = function() {
this.handle = setInterval(
    (function(self) {
    return function() {
      self.move();
      if(self.position[1]==1) self.stop(self.handle); //Stop on some condition   
      }
    })(this), 1000);
  };
  this.stop = function(handle) {
      console.log("time to stop");
      clearInterval(handle);
    }

Answer 3

您遇到的问题是this代码中的各个点。 setInterval是window对象上的函数，因此this是对window的引用。但是不要相信我的话！ console.log(this)并亲自看看！

以下解决方案是解决问题的一种方法。请注意将this设置为that。以及将bug绑定到此.....

<script>
  var Npc = function(name) {
    this.name = name;
    this.grid = [[0,9], [0,9]];
    this.position = [0,0];
  }

  Npc.prototype.start = function() {
    if(this.interval) {
      clearInterval(this.interval);
    }

    this.interval = setInterval(function(that) {
      that.move();
    }, 100, this);
  }


  Npc.prototype.stop = function() {
    if(this.interval) {
      clearInterval(this.interval);
    }
  }

  Npc.prototype.move = function() {
    this.position[0] = this.position[0] + Math.floor(Math.random() * 2);
    this.position[1] = this.position[1] + Math.floor(Math.random() * 2);
    if (this.position[0] > this.grid[0][1] || this.position[1] > this.grid[1][1]) {
      this.position = [0,0];
    };
    console.log(this.name + " moved to " + this.position);
  }


  var bug = new Npc("test-name");
  bug.start();
  setInterval(bug.stop.bind(bug), 5000);
</script>

停止对象的js间隔

3 个答案: