javascript - javascript setTimeout函数在1次调用后无法正常运行

我有以下功能：

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结束，它也将不再起作用。

我不明白为什么，因为每个超时或间隔都属于它自己的变量。

最佳答案

您的代码永远不会将不透明度重置为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

关于javascript - javascript setTimeout函数在1次调用后无法正常运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37530693/