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