SetTimeout and SetInterval hibernation problems in JavaScript

Front yard farmers in the project, there must be no small need to achieve the effect of the carousel. But there are special needs, such as:

You need to do the first container content after the carousel is scrolled, the second container is rolled inside again, and the third container content carousel scrolls.

At this time my first thought is: Each container is considered a separate carousel effect, since it is a sequential scrolling to set the start time lag, three settimeout () respectively delay difference.

HTML Code:

<div id= "Warp" >
        <div class= "items" >
            <ul class= "island S1" >
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </div>
        <div class= " Items ">
            <ul class=" Island s2 >
                <li>444</li>
                <li>555</li>
                <li>666</li>
            </ul>
        </div>
        <div class= "items" >
            <ul class= " Island S3 ">
                <li>777</li>
                <li>888</li>
                <li>999</li>
                <li>000</li>
            </ul>
        </div> </div>

CSS Code:

. items{height:18px;overflow:hidden;margin-bottom:10px;border-bottom:1px dashed #999;}

JAVASCRIPT Code: (Based on jquery implementation)

var uls = $ ("#warp"). Find (". Island"),
    lh = uls.find (' li '). Height (),
    size  = Uls.size (),
    global=[];// Global variable
    
    
uls.each (function (I,el) {
    $ (EL). Find (' Li '). A (). Clone (True). Appendto ($ (EL));
    
});
    
/* Animation effect * *
function Animates (i) {
   global[i]==undefined&& (global[i]=0);
    global[i]++;
    _els =uls.eq (i);
    var len = _els.find (' li '). length;
    _els.animate ({"margintop":-global[i]*lh+ "px"},600,function () {
        if (global[i] = = len-1) {
            global[i]=0;
            _els.css ({"Margin-top": "0px"});
        }
    );
function interval (i) {
    setinterval (function () {
        animates (i)
    },5000);
for (Var x=0;x<size;x++) {
    (function (x) {
        settimeout (function () {
            interval (x);
        },650+x*650);
    }) (x)};

At first I found it all OK, but when I switched to another page, or temporarily minimized it, the carousel became messy. This question bothers me for a long time, consult the company

Daniel's colleague, he said, may be the setinterval hibernation problem.

After careful information and practice, it is found that when the page is minimized or when the page is switched to browse other pages, SetInterval will temporarily enter the "hibernation" state, but not without executing the program, it will need to perform the operation in the queue, Wait until the next window opens a moment to all the queues inside the execution, because the program processing too fast we most of the time did not notice the problem. But you go to see the carousel effect of all the sites,

Let's say you're on the fourth Zhang Datu, and the next time you open it, it may be arbitrary.