Не использовать правильно javascript setTimeout/clearTimeout?

Question

У меня проблема с простым javascript и некоторыми ajax.

У меня есть связь, которая вызывает яваскрипт функцию следующим образом:

<div id="Button11" onmouseover="changeContent4()">Actions</div> 

функция Javascript, что называется выше, как это:

function changeContent4() 
{ 
    BubbleOn() 
    document.getElementById("text1").innerHTML='Some text here'; 
    clearTimeout(BOffi); 
    var BOffi = setTimeout(BubbleOff, 20000); 
} 

Это работает, он запускает функцию BubbleOn, помещает текст элемент text1, скорее всего, он очищает тайм-аут BOffi и устанавливает для него новый тайм-аут 20000ms.

Вот BubbleOn:

function BubbleOn() { 
$("#bubble").fadeIn(function() { 
    }) 
} 

А вот BubbleOff:

function BubbleOff() { 
$("#bubble").fadeOut(function() { 
    }) 
} 

Как и в функциях BubbleOn и BubbleOff работает. Они просто скрывают или показывают div с именем bubble, который содержит элемент text1. Когда BOffi идет тайм-аут, он просто запускает функцию BubbleOff. Это прекрасно работает. Проблема заключается в том, что при запуске BubbleOff мышь сразу же помещается по ссылке, которая запускает changeContent4(), она снова отображает пузырек div и снова помещает текст, но затем пузырь div исчезает через секунду! Не после 20000 мс. После этого, если мышь снова помещается для запуска changeContent4(), все работает отлично. Если в течение миллисекунды больше времени, чем секунда между затуханием пузырьков и размещением мыши над changeContent4(), она работает и ждет 20000 мс. Меньше секунды и пузырь показывается примерно в секунду ...

Что может быть причиной этого? Может ли быть, что fadeOut все еще работает, даже пузырь исчез с экрана, и поэтому он не сбрасывает счетчик BOffi? Что может занять 1 секунду или меньше, а затем снова запустить BubbleOff после этой магической секунды?

Answer 1

На первый взгляд я замечаю это var BOffi = setTimeout (BubbleOff, 20000) ;. Это создает локальную переменную. После выполнения функции будет потеряна. Вторая функция времени называется Boffi - это случайное остаточное значение.

Сделайте его глобальным, и вы должны быть в порядке (удалить var).

Answer 2

Поскольку анимация в очереди, но ваш скрипт продолжают работать, попробуйте это один:

function changeContent4() 
{ 
    bubble(function(){ 
     document.getElementById("text1").innerHTML='Some text here'; 
    }); 
} 
var fadeTimeout = null; 
function bubble(callback) { 
    if(fadeTimeout==null) 
     $("#bubble").fadeIn(1000, function(){ 
      if($.isFunction(callback)) 
       callback(); 
      fadeTimeout = setTimeout(bubbleOff, 20000); 
     }); 
} 

function bubbleOff() { 
    $("#bubble").fadeOut(1000, function(){ 
     fadeTimeout =null; 
    }); 
} 

Fiddle here

Вы можете хотите переместить callback() вызов перед FadeIn, как вы изменяете текст внутри пузыря но это пример только для того, чтобы вы могли видеть порядок каждого изменения.

EDIT: теперь разрешено несколько вызовов

var i = 0; 

function changeContent4() { 
    bubble(function() { 
     $("#text1").text('Some text here ' + (i++)); 
    }); 
} 

var fadeTimeout = null; 

function bubble(callback) { 
    if ($.isFunction(callback)) callback(); 

    if (fadeTimeout == null) { 
     $("#bubble").fadeIn(1000, function() { 
      fadeTimeout = setTimeout(bubbleOff, 20000); 
     }); 
    } else { 
     clearTimeout(fadeTimeout); 
     fadeTimeout = setTimeout(bubbleOff, 20000); 
    } 
} 

function bubbleOff() { 
    $("#bubble").fadeOut(1000, function() { 
     fadeTimeout = null; 
    }); 
} 

FIDDLE

Answer 3

function BubbleOn() { 
$("#bubble").fadeIn(function(){},1000) 
} 
function BubbleOff() { 
$("#bubble").fadeOut(function() {},1000) 
} 

You should set duration for both fadeIn and fadeOut functions. 

Answer 4

Две идеи попробовать:

1. пут "clearTimeout (BOFFI);" в верхней части функции до «BubbleOn();».

2. Объявить BOffi как глобальную переменную.

Итак:

var BOffi; 
function changeContent4() 
{ 
    clearTimeout(BOffi); 
    BubbleOn(); 
    document.getElementById("text1").innerHTML='Some text here'; 
    BOffi = setTimeout(BubbleOff, 20000); 
} 

или вы можете использовать вместо window.BOffi.