JavaScript：オブジェクトの問題

Question

少しタイマーをプログラミングしています。

var counter = { 
    seconds: 100, 
    clock: function() { 
     $('input').val(this.seconds); 
     this.seconds -= 1; 
     setTimeout(this.clock(), 1000); 
    } 
}; 

counter.clock(); 

をどういうわけかhttp://jsfiddle.net/4ktEG/

私は、コードを実行するたびに、私は別の答えを得るに取り組ん例で次のようにコードがあります。何が問題ですか？

Answer 1

これはあなたが探しているカウントダウンです。

var counter = { 
    seconds: 100, 
    clock: function() { 
     $('input').val(this.seconds); 
     this.seconds -= 1; 
     setTimeout(function(){counter.clock()}, 1000); 
    } 
}; 

counter.clock(); 

http://jsfiddle.net/4ktEG/13/

Answer 2

用途：

var counter = { 
    seconds: 100, 
    clock: function() { 
     $('input').val(counter.seconds); 
     counter.seconds -= 1; 
     setTimeout(counter.clock, 1000); 
    } 
}; 

counter.clock(); 

あなたが「これは」関数の内部で、何がしたいことは、「カウンター」オブジェクトを参照するために使用さです。

Answer 3

あなたが入力したsetTimeoutが呼び出されたときに消えた後、「100」を表示したい場合は、上のブラケットを取らなければならない「（this.clock）」

そのため：あなたが言う

var counter = { 
seconds: 100, 
clock: function() { 
    $('input').val(this.seconds); 
    this.seconds -= 1; 
    setTimeout(this.clock, 1000); 
} 
}; 

counter.clock(); 

Answer 4

setTimeout(this.clock(), 1000); //the clock method will be called right away. 

タイムアウトがグローバルコンテキストで実行される代わりに

setTimeout(this.clock, 1000); 

Answer 5

これを使用してください。したがって、ハンドラ内の 'this'はグローバルコンテキストを参照します。目的の結果を得るには、関数を目的のコンテキストにバインドする必要があります。コンテキストパラメータを取るfunction.callまたはfunction.applyを調べてください。

var counter = { 
    seconds: 100, 
    clock: function() { 
     $('input').val(this.seconds); 
     this.seconds -= 1; 
     var closure = function() { 
      counter.clock.call(counter); 
     }; 

     setTimeout(closure, 1000); 
    } 
}; 

counter.clock(); 

Answer 6

のjQueryはthis値を結合するためjQuery.proxy()^[docs]方法を有しています。

setTimeout($.proxy(counter,'clock'), 1000); 

$.proxyはthis値としてバインドcounterとcounter.clockを起動する機能を返します。

---

それとも、永久counter.clockにcounterをバインドするために、このようにそれを使用することができます：

var counter = { 
    seconds: 100 
}; 

counter.clock = $.proxy(function() { 
    $('input').val(this.seconds); 
    this.seconds -= 1; 
    setTimeout(this.clock, 1000); 
}, counter); 

counter.clock(); 

例：のhttp：http://jsfiddle.net/bmYAN/