javascript - 配列に新しいアイテムを追加するときにsetIntervalが自動的に停止する

Question

最初から非同期で実行され、作成時にオブジェクトが配列にプッシュされる新しいオブジェクトを作成しようとしています。ボタンをクリックして新しいオブジェクトを追加するたびに、配列内のオブジェクトの他の setInterval が停止します。次に、別のものを追加すると、それらすべてが再び開始されます。何が起きてる？

コードの一部は次のとおりです。

floor = {
    w_house: function() {
        this.shop = 'w_house';
        this.villains = [];
        this.thieves = 0;   
        that = this;
        setInterval(function() {
            if(that.thieves > 0) {
                console.log(that.thieves);
            }
        }, 10);
        lair.push(this);
        return $('<li/>').addClass('w_house').addClass('floor').append($('<div/>').addClass('test').text('test'));
}}

lair = [];

$('.button').live('click', function() {
        $('#lair ul').append(new floor[$(this).attr('id')]());
});

ありがとう！

Answer 1

thievesオブジェクトのメンバーをインクリメントする場所を示していませんが、that変数にはグローバルスコープがあり、関数の実行ごとにその値が上書きされます。試す：

var that = this;

Answer 2

次のコードを試してください。これをコンストラクターで渡すのは安全ではありません (一部のブラウザーでは)。

floor = {
    w_house: function() {
      this.shop = 'w_house';
      this.villains = [];
      this.thieves = 0;
      this.init = function() {
        setInterval(function() {
            if(this.thieves > 0) {
                console.log(this.thieves);
            }
        }, 10);
        lair.push(this);
        return $('<li/>').addClass('w_house').addClass('floor').append($('<div/>').addClass('test').text('test'));
      }; 
}}

lair = [];

$('.button').live('click', function() {
      var floor_house = new floor[$(this).attr('id')]();
      $('#lair ul').append(floor_house.init());
});