几个周期后，setInterval()超速/减速功能传播

Question

使用 setInterval()和 clearInterval()循环四个图像的轮播。在初始页面负载上，这些功能似乎按预期工作。但是，经过几个周期和徘徊，集中在页面上后，周期开始在几个图像之间加速，并且在另一个图像之间保持良好状态。有时，它在周期中开始跳过图像。有时，它也会自动更正并再次开始工作正常。这是我所拥有的：

jQuery(document).ready(function($) {
var count = -1;
var maxCount = $('.hero-blocks .block').length;
var colors = new Array('yellow', 'blue', 'promo', 'purple');
var autopager, timer = false;
var desktop = false,
    mobile = false;

function carousel() {
    if(count < maxCount - 1) {
        count++;
    } else {
        count = 0;
    }
    $('.hero-blocks .block.active').removeClass('active');
    $('.hero-blocks .block.' + colors[count] + '').addClass('active');
};
function startAutopager() {
    autopager = window.setInterval(carousel, 4000);
    timer = true;
}
function stopAutopager() {
    window.clearInterval(autopager);
    $('.hero-blocks .block').removeClass('active');
    timer = false;
}
function triggerCarousel() {
    if (Modernizr.mq('only screen and (min-width: 1024px)')) {
        // This stuff stops the carousel if the user goes to a different tab
        if(!desktop) {
            startAutopager();
            window.addEventListener('focus', startAutopager);
            window.addEventListener('blur', stopAutopager);
            desktop = true;
            mobile = false;
            $('.hero-blocks .block').hover(function() {
                stopAutopager();
            }, function() {
                startAutopager();
            });
        }
    } else if(!mobile) {
        stopAutopager();
        mobile = true;
        desktop = false;
    }
}
triggerCarousel();
$(window).resize(function() {
    triggerCarousel();
});
});

Answer 1

我认为这里的问题是可以多次调用window.setInterval(carousel, 4000)，因为它是在几个不同的事件中触发的，并且该代码没有检查它是否已经在运行。

我建议在致电setInterval

之前检查timer的值

function startAutopager() {
    if (!timer) {
        autopager = window.setInterval(carousel, 4000);
        timer = true;
    }
}
function stopAutopager() {
    if (timer) {
        window.clearInterval(autopager);
        $('.hero-blocks .block').removeClass('active');
        timer = false;
    }
}

另一个次要点-setInterval不能保证完美的时机，因此carousel仍然有可能通过不同的间隔触发。