Problems in some browsers with jquery animation, recursion and inactive\active tab?

Question

JavaScript

Task: It is necessary to update the block every N seconds. Before the ajax request, there is an animation, after receiving the data, there is also an animation. Block disappeared -> updated data -> appeared -> N seconds -> recursion.

Arising problem: the latest version of chrome opens, everything works fine if you open another tab for a couple of minutes (at that time, several iterations-updates of the block will be performed on the previous tab), then we return to the previous tab, we will see how the block is sausage and the animation is like that the bass player from the joke “fu-x, did it ..” fadeout-fadein-fadeout-fadein-etc, which, in theory, should have been performed in the background, is performed one by one. The chrome debugger shows that ajax requests are going as they should - once every N seconds. The problem exists in chrome and firefox.

The code is something like this:

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/>

What is the problem and how to fix it?

Answer 1

The same problem came up recently. The only solution I see is to turn off the animation by $("body").blur()

Answer 2

Instead of queue, we use callback and here is the code for the onAjaxSuccess function that worked:
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);
}
}