Chrome 和 Firefox 的 setInterval 问题

Question

我正在处理的网站有问题。它不仅是这个站点，而且是我使用 Jquery 滑块制作的另一个站点。他们都有不同的插件。问题是，当您更改标签时，当您返回时，滑块会变得非常疯狂……尤其是在 Chrome 中。该网站是http://www.firedogpr.com/index.php。我已经阅读了有关此问题的信息，但我不是 JS 向导，因此将不胜感激。

由于某种原因，它目前根本无法在 Windows 中运行。我也在研究这个。

我基本上是从http://www.snowdenindustries.com 获取代码并对其进行了修改。这是可能是问题的js的sn-p

if ($("#mainSlide").length>0) {
    $("#mainSlide div.slide").hide();
    $("#mainSlideNav li a:first").addClass("cur");
    $("#mainSlide div.slide:first").show();


    $("#mainSlideNav li a").click(function() {
        $("#mainSlideNav li a").removeClass("cur");
        $(this).addClass("cur");
        $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn(1200).addClass("cur");
        return false;
    });

    function slideTimer() {
        if (!($('#mainSlideNav li a.cur').parent().next().children("a").length>0)) {
            $("#mainSlideNav li a").removeClass("cur");
            $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
            $("#mainSlideNav li a:first").addClass("cur");
            $("#mainSlide div.slide:first").fadeIn("slow").addClass("cur");
        } else {
            var nextTab = $('#mainSlideNav li a.cur').parent().next().children("a").attr('id');
            var nextDiv = $('#mainSlide div.slide:visible').next().attr('id');
            $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
            $("#mainSlideNav li a").removeClass("cur");

            $("#"+nextTab).addClass("cur");
            $("#"+nextDiv).fadeIn("slow").addClass("cur");
        }
    }
    var miniCount = setInterval( slideTimer, 5000);
    $("#mainSlideNav li a, #mainHeader").mouseenter( function(){
        clearInterval(miniCount);});
    $("#mainSlideNav,  #mainHeader").mouseleave( function(){
        clearInterval(miniCount);
        miniCount = setInterval(slideTimer, 5000);});
}

Answer 1

jQuery 文档明确规定不要使用间隔计时器中的 jQuery 动画 API（如 fadeIn），正是因为 jQuery 使用的 API 暂停在后台选项卡中，因此您最终会同时运行多个淡入。

至少在您使用的旧 jQuery 中；我相信当前的 jQuery 解决了这个问题。