Exploration and solution to the strange effect of setInterval when switching tabs in Firefox and Chrome! _javascript skills

In the previous article: I think the text scrolling in the lower left corner of Zhubajie.com works well, so I explored it myself and implemented it in my own way!

It has this effect, but it has little impact. The impact of the demo is huge!

Some people on the Internet have also had this problem. See the post address below:

A problem with setInterval in firefox 6

Many people have discussed it, but no answer has been given.

I can’t figure it out no matter how much I think about it!

Today, something suddenly dawned on me. It may be the concept of threads, but I still don’t understand the specific reason. I hope someone knows the reason and can let me know. Thank you very much!

The black Div ​​in the Demo is not affected by browser tab switching

The red Div will be affected.
HTML:

Copy code The code is as follows:

I am not affected by browser tab switching! Hoooo

I am affected by browser tab switching! 5555

javascript:

Copy code The code is as follows:

(function(){
var elem = Meng.getId('move'),
elem2 = Meng.getId('move2'),
pos = Meng.getElemViewPosition(elem),
view = Meng.getBrowserView(),
//Gray block movement function
move = function(){
var t1 = Meng.animate(elem,{top:0,left:0} ,{top:view.height-100,left:view.width-100},3000,function(){
var t2 = Meng.animate(elem,{left:view.width-100},{left: 100-view.width},3000,function(){
var t3 = Meng.animate(elem,{top:view.height-100},{top:100-view.height},3000,function() {
move();//After confirming that t3 has finished moving, I call back the move() function
});
});
});
};
move();
//Red block movement function
Meng.setStyle(elem2,{top:0,left:(view.width-100) 'px'});
var move2 = function( ){
var t1 = Meng.animate(elem2,{top:0,left:view.width-100},{top:view.height-100,left:100-view.width},3000,function( ){
var t2 = Meng.animate(elem2,{top:view.height-100},{top:100-view.height},3000,function(){
var t3 = Meng.animate( elem2,{left:0},{left:view.width-100},3000,function(){
});
});
});
};
move2();
setInterval(function(){move2();},9050);
//Red block motion function
})();