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);
}

jsfiddle

javascript setTimeout 函数在 1 次调用后行为不正常

javascript setTimeout function does not behave normally after 1 call

javascript

settimeout

setinterval