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 секунд он начинает исчезать.

Обычно он работает нормально для первого вызова, но если я нажму несколько раз, он больше не работает, даже если я дам время.

Я не понимаю, почему, потому что каждый таймаут или интервал принадлежит его собственной переменной.

Answer 1

Ваш код никогда не сбрасывает непрозрачность до 1. Кроме того, если вы активируете действие еще до завершения цикла, предыдущий цикл не отменяется. Таким образом, если вы запускаете пузырь, а затем запускаете его снова через 5 секунд, первый цикл все равно будет работать, и пузырь исчезнет всего за 2 секунды. Если вы нажмете снова, пузырь будет исчезать по циклу, который начинался со второго нажатия.

Я думаю, что вам нужно сохранить ссылки на таймер с самим объектом пузырька, а затем сбросить все, когда вы хотите начать цикл отображения. Вы можете использовать .data() метод JQuery для этого:

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