同じタイプの複数のオブジェクトのメソッドのsetTimeout

Question

同じタイプのオブジェクトのメソッドでは、 "setTimeout"の使用について助けが必要です。私はそれらを使用するHTMLコード内のどこか

obj1 = new myObject('Something here'); 
    obj2 = new myObject('Something else here'); 

：

<button onclick="obj1.show()">Something here</button> 
    <button onclick="obj2.show()">Something else here</button> 

は、ユーザーが1つを押すと、私は2つのオブジェクトを持っている

function myObject(param){ 

     this.content = document.createElement('div'); 
     this.content.style.opacity = 0; 
     this.content.innerHTML = param; 

     document.body.appendChild(this.content); 

     this.show = function(){ 
      if(this.content.style.opacity < 1){ 
       this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1); 
       that = this; 
       setTimeout(function(){that.show();},100); 
      } 
     } 

     this.hide = function(){ 
      if(this.content.style.opacity > 0){ 
       this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1); 
       that = this; 
       setTimeout(function(){that.hide();},100); 
      } 
     } 
    } 

どこかを：私は私のオブジェクトを開始するには、このコードを使用しますボタンはすべてうまくいくが、ユーザがあるボタンを押した後、短い時間間隔後にもう一方のボタンを押すと、最初のボタンによってトリガされたアクションは停止し、2番目のボタンのアクションのみが実行されるed。 私はグローバル変数 "that"が2番目のオブジェクトのrefenceになることを理解していますが、以前に呼ばれたメソッドをブロックしない自動メカニズムの作成方法はわかりません。 P

Answer 1

このようなことを処理する方法はいくつかあります。私の頭の上から1つだけです。

まず、setTimeoutの中に入れるための無名関数を書いています。オブジェクトのメソッドをスコープにバインドしてsetTimeoutに送信するほうが、より洗練されています。ヒッチングを行う方法はたくさんありますが、すぐにbind（）が標準になります（you can write this into your own support libraries yourself for browser compatibility）。このようにすると、自分の変数を自分のスコープ（グローバルスコープ内の "その"変数なし）に保ち、このようなバグを避けることができます。たとえば、

function myObject(param){ 

    // ... snip 

    this.show = function(){ 
     if(this.content.style.opacity < 1){ 
      this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1); 
      setTimeout(this.show.bind(this),100); 
     } 
    } 

    this.hide = function(){ 
     if(this.content.style.opacity > 0){ 
      this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1); 
      setTimeout(this.hide.bind(this),100); 
     } 
    } 
} 

第2に、オブジェクトにアニメーション処理メソッドを追加したいとします。 setTimeoutは、スケジュールされたコールバックをキャンセルするために使用できるハンドルを返します。 this.registerTimeout（）とthis.cancelTimeout（）のようなものを実装すると、一度に1つのことしか実行されていないことを確認し、あなたの記述のようにクリックした熱狂的なユーザーからコードの動作を守ることができます。

Answer 2

あなたが解約何かが必要な場合は、代わりのsetTimeoutのwindow.setIntervalを使用します。私はいくつかのミスを犯した場合

は、事前にありがとう、私の英語のため申し訳ありません。 setIntervalは、その後の間隔をキャンセルするために使用することができ間隔にハンドルを返します：

var global_intervalHandler = window.setInterval(function() { ... }, millisecondsTotal); 

// more code ... 

// later, to cancel this guy: 

window.clearInterval(global_intervalHandler); 

だからここから私はあなたがあなた自身の自己期限切れの操作を行うために、あなたのエンジニアのスキルと創造性を使用することができます確信している - 彼ら場合実行し、正常に完了する（または失敗した場合でも）、自分の間隔を取り消す。別のプロセスが介入すると、間隔を最初に取り消し、その動作を開始することができます。

Answer 3

これはグローバル変数として必要ですか？ var that = this;に変更するだけで、関数のコンテキスト内で変数を使用します。