A small problem with JQuery slideshow (how to discover and resolve the process) _jquery

first stage, try slideshow
In doing a Web page homepage, want to use slideshow[1] do picture switching effect, which JS part of the code as follows:

Copy Code code as follows:

function Next_slide () {
var $active = $ (' #bitware-overlay img.active ');
if ($active. length = 0)
$active = $ (' #bitware-overlay img:last ');
var $next = $active. Next (). length? $active. Next (): $ (' #bitware-overlay img:first ');
$active. addclass (' last-active ');
$next. addclass (' active ');
$next. css ({opacity:0.0});
$next. Animate ({opacity:1.0}, 1500,function () {
$active. Removeclass ();
});
}
$ (function () {
SetInterval ("Next_slide ()", 4000);
});

second stage, finding problems
In the open page so the normal test is no problem, finally, the leader found that when the browser at the same time to open more than one tab, the page in his tab after a period of time, will appear the picture is the last picture, and then change to the first picture, just change (with the effect of fading) completed, suddenly jump to the last picture. When I changed to:

Copy Code code as follows:

function Next_slide () {
var $active = $ (' #bitware-overlay img.active ');
if ($active. length = 0)
$active = $ (' #bitware-overlay img:last ');
var $next = $active. Next (). length? $active. Next (): $ (' #bitware-overlay img:first ');
$active. addclass (' last-active ');
$next. addclass (' active ');
$next. css ({opacity:0.0});
$next. Animate ({opacity:1.0}, 1500);
$active. Removeclass ();
SetTimeout ("Next_slide ()", 4000);
}
$ (function () {
SetTimeout ("Next_slide ()", 4000);
});

found that the rest of the tab, back to the page, the picture is displayed in the correct order, interval is correct, 4000 milliseconds, but when shown, is a direct jump, nor fade out shape, it seems that animate 1500 milliseconds did not start any effect. After a period of time will return to normal, but this phenomenon of the length of time, with the rest of the tab time seems to be proportional to the length.
Phase III, problem solving
The final reason for this is that jquery's nature is single-threaded [2], and when stuck in another tab, the Next_silde () function in the task will accumulate too much. The Final solution found [4] is as follows:

Copy Code code as follows:

function Next_slide () {
var $active = $ (' #bitware-overlay img.active ') ;
if ($active. length = = 0)
$active = $ (' #bitware-overlay img:last ');
var $next = $active. Next (). Length $active. Next (): $ (' #bitware-overlay img:first ');
$active. addclass (' last-active ');
$next. addclass (' active ');
$next. css ({opacity:0.0});
$next. Animate ({opacity:1.0}, 1500,function () {
$active. removeclass ();
settimeout ("Next_slide ()", 4000);
});
}
$ (function () {
settimeout ("Next_slide ()", 4000);
});