JavaScriptのsetTimeout関数は、1つのコール

Question

後に正常に動作しない私には、以下の機能を持っている：

function loadInfoBubble(aString) 
     { 
      $('#infoBubble').html('<h3>info :</h3><p>'+aString+'</p>'); 
      infoBubble.style.display = "block"; 

      var opacity = 9; 
      var vanishBlock = null; 

      var theTimeOut = setTimeout(function() 
      { 
       vanishBlock = setInterval(function() 
       { 
        if(opacity > 0) 
        { 
         opacity--; 
        } 
        infoBubble.style.opacity = "0."+opacity; 
       }, 100); 
      }, 7000); 

      var theTimeOut2 = setTimeout(function() 
      { 
       infoBubble.style.display = "none"; 
       clearInterval(vanishBlock); 
      }, 9000); 

     } 

この関数は、のonclickイベントでボタンにリンクされています。 この関数は、9秒間の文を含むブロックを表示し、7秒後には消滅し始めます。

最初の呼び出しでは正常に動作しますが、何回かクリックすると、timeOutsの終了を許可しても、それ以上は動作しません。

タイムアウトまたは間隔がそれぞれの変数に属している理由がわかりません。

Answer 1

コードでは、不透明度が1にリセットされることはありません。また、サイクルが終了する前にアクションを再度トリガすると、前のサイクルはキャンセルされません。したがって、バブルをトリガーしてから5秒後に再度トリガーすると、最初のサイクルは実行され、バブルはわずか2秒で消えます。 を再びをクリックすると、2番目のクリックで開始されたサイクルでバブルがぼやけます。

バブルオブジェクト自体でタイマーリファレンスを保存してから、表示サイクルを開始するときにすべてをリセットする必要があると思います。機能外のグローバル変数を定義し

function loadInfoBubble(aString) { 
    var $bubble = $("#infoBubble"); 
    $bubble 
    .html('<h3>info :</h3><p>' + aString + '</p>') 
    .css({ display: "block", opacity: 1 }); 

    var opacity = 9; 

    var timers = $bubble.data("timers") || {}; 
    clearInterval(timers.vanishBlock); 
    clearTimeout(timers.showTimer); 
    clearTimeout(timers.clearTimer); 

    timers = { 
    showTimer: setTimeout(function() { 
     timers.vanishBlock = setInterval(function() { 
     if (opacity > 0) { 
      opacity--; 
     } 
     $bubble.css({ opacity: "0." + opacity }); 
     }, 100); 
    }, 7000), 
    clearTimer: setTimeout(function() { 
     $bubble.css({ display: "none" }); 
     clearInterval(timers.vanishBlock); 
    }, 9000) 
    }; 
    $bubble.data("timers", timers); 
} 

jsfiddle