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秒後開始消失。

第一次調用時表現正常，但如果我點擊幾次，即使我讓timeOut結束，它也不再起作用。

我不明白爲什麼，因爲每個超時或間隔屬於它自己的變量。

Answer 1

您的代碼不會將不透明度重置爲1.另外，如果在週期結束之前再次觸發該操作，則前一個週期不會取消。因此，如果您觸發氣泡，然後在5秒鐘後再次觸發，則第一個循環仍將運行，氣泡僅在2秒內消失。如果再次點擊，氣泡將在第二次點擊開始的週期內消失。

我認爲你需要做的是保存與泡泡對象本身的定時器引用，然後重置所有的東西，當你想開始一個顯示週期。您可以使用jQuery的.data()方法爲：

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