SetTimeout and setInterval sleep in javascript.

SetTimeout and setInterval sleep in javascript.
After the content of the first container is rotated and rolled, the second container is rotated and the content of the third container is rotated. At this time, my idea at the beginning was: Every container is regarded as a separate carousel effect. Since it is rolling in sequence, the time difference between the start of the rolling is set, and the delay difference between the three setTimeout () values is different. HTML code: copy the Code <div id = "warp"> <div class = "items"> <ul class = "island s1"> <li> 111 </li> <li> 222 <<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> copy the CSS code :. items {height: 18px; overflow: hidden; margin-bottom: 1 0px; border-bottom: 1px dashed #999;} JAVASCRIPT code: (implemented based on jquery) copy the code var uls =$ ("# warp "). find (". island "), lh = uls. find ('lil '). height (), size = uls. size (), Global = []; // Global variable uls. each (function (I, el) {$ (el ). find ('lil '). first (). 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 ('lil '). 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)}; when I copied the code, I found it was OK, however, when I switch to another page or temporarily minimize it, the carousel will become messy. This problem has plagued me for a long time. I went to the company to ask Daniel's colleague, who said it may be caused by the problem of setInterval sleep. After careful reading of materials and practices, it is found that when the page is minimized or when the page is switched to another page, setInterval temporarily enters the "Sleep" state, but does not run the program, it will put the operations to be executed in the queue, and wait until the next window opens immediately to execute all the operations in the queue, because the program processing is too fast, we did not notice this problem most of the time. However, if you go to view the carousel effects of all websites and assume that you are now playing the fourth large image, the next time you open the video, it may be arbitrary. Analyze the above program: we let the program run for 650 ms, 1300 ms, and ms respectively. If the window is always this window, that is, it does not sleep. The program can be executed as usual. If the window is minimized and the program goes to sleep, the operations in the queue will be executed together in a short time, so the program will be messy at once. So how can we solve this problem? I still think about jquery's animate. If the animation callback is recursive, go to the next carousel. That's not a perfect solution !! Let's look at the program: JAVASCRIPT code: copy the code var uls =$ ("# warp "). find (". island "), lh = uls. find ('lil '). height (), size = uls. size (), I = 0; uls. each (function (I, el) {$ (el ). find ('lil '). first (). clone (true ). appendTo ($ (el) ;}); function animates (I) {var ul = $ ('. items '). eq (I ). find ('ul '); if (! Ul) {return false;} var count = parseInt (ul. attr ("count-role") | 0); count ++; var len = ul. find ('lil '). length; ul. animate ({"marginTop":-count * lh + "px"}, 600, function () {if (count = len-1) {count = 0; ul.css ({"margin-top": "0px"});} ul. attr ("count-role", count); animates (++ I) ;};}; function interval () {setInterval (function () {animates (I )}, 5000) ;}; interval () copies the code to perfectly solve this problem. I guess the browser has limited resources due to its special nature. Therefore, this policy is understandable.