javascript - 自定义 Div slider 速度太快，但仅在从另一个浏览器选项卡返回时

Question

当我查看运行中的代码时，没有任何问题。但是，一旦我在另一个浏览器选项卡上花了一些时间，然后返回到正在运行的代码，时间/速度就太快了。

这是 jQuery:

var divId = 1;
var lp = 0;

$(document).ready(function (){

    setInterval(function()
        {
        //<![CDATA[

            if(divId < 6)
            {
                $('.main-banner').animate({ left: lp },400);

                $(".first-icon-inner").removeClass("active-icon");
                $("#banner-"+divId+" div:first").addClass('active-icon');

                    divId++;
                    lp-=550;

            }
            else
            {
                lp = 0;
                divId=1;

                $('.main-banner').animate({ left: lp },400);

                $(".first-icon-inner").removeClass("active-icon");
                $("#banner-"+divId+" div:first").addClass('active-icon');


            }
            //]]>

    }, 3400);

});

Answer 1

jQuery < 1.6.3 有一个 bug ... 摘自 jQuery 1.6.3 release notes :

We had high hopes for the browser’s requestAnimationFrame API when we added support into version 1.6. However, one of the highest-volume complaints we’ve received since then relates to the way requestAnimationFrame acts when a tab is not visible. All the animations initiated when the tab is invisible “stack” and are not executed until the tab is brought back into focus. Then they all animate at warp speed! We’ve removed support for this API (which has no impact on the way you call jQuery’s animation features) and plan to incorporate it into a future version of jQuery.

我建议您更新到更新的版本...即 jQuery => 1.6.3