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 秒内消失。 如果再次单击 ，气泡将被第二次单击时开始的循环淡化。

我认为您需要做的是使用气泡对象本身保存计时器引用，然后在您想要开始显示周期时重置所有内容。 您可以使用 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);
}

提琴手