Проблемы в некоторых браузерах с jquery animation, рекурсией и неактивной\активной вкладкой?

Question

[AFoST]

Задача: Нужно обновлять блок каждые N секунд. Перед ajax запросом происходит анимация, после получения данных тоже анимация. Блок исчез -> обновил данные -> появился -> N секунд -> рекурсия.



Возникающая проблема: открывается хром последней версии, всё работает хорошо, если открыть другую вкладку на пару минут (в то время на прошлой вкладке выполнится несколько итераций-обновлений блока), далее возвратимся на предыдущую вкладку, то увидим как блок колбасит и анимация — как тот басист из анекдота «фу-х, успел..» один за другим выполняется fadeout-fadein-fadeout-fadein-итд, которые по идее должны были выполниться в бекграунде. Дебагер хрома показывает, что ajax-запросы идут как надо — раз в N секунд. Проблема существует в chrome и firefox.



Код примерно такой:

function getContent(element) {<br/>
 $.post(&quot;/random-clients-or-team.php&quot;, { random: &quot;clients&quot; }, onAjaxSuccess);<br/>
 function onAjaxSuccess(data) {<br/>
 $(element).fadeToggle(1000);<br/>
 $(element).queue(function () {<br/>
 $(element).empty().prepend(data).delay(300);<br/>
 $(element).fadeToggle(1000);<br/>
 $(element).dequeue();<br/>
 });<br/>
 if (element == '.random-clients-content') {<br/>
 setTimeout(&quot;getContent('.random-clients-content');&quot;, 10000);<br/>
 }<br/>
 }<br/>
 }<br/>
 getContent('.random-clients-content'); <br/>

В чём проблема и как её исправить?

Answer 1

[Silentium]

Недавно возникла та же самая проблема. Единственное решение, что я вижу — отключать анимацию по $(«body»).blur()

Comments

[AFoST]

Да, такая идея тоже приходила в голову.

[AFoST]

Silentium, решение нашёл. Если интересно, посмотри.

Answer 2

[AFoST]

Вместо queue используем callback и вот такой код для функции onAjaxSuccess заработал:
function onAjaxSuccess(data) {
$(element).animate({ opacity: 'toggle' }, { duration: 1000, queue: false, complete: function () {
$(element).empty().prepend(data);
$(element).animate({ opacity: 'toggle' }, { duration: 1000, queue: false});
}
});
if (element == '.random-clients-content') {
setTimeout("getContent('.random-clients-content', true);", 20000);
}
}