Question

使用setInterval()和clearInterval()循环播放4张图片的轮播。在初始页面加载时，函数似乎按预期工作。但是，经过几个循环并将鼠标悬停在页面外，循环开始在几个图像之间加速，并在另一个图像中保持良好状态。有时，它开始在循环中一起跳过图像。有时它也会自动校正并再次开始正常工作。这就是我所拥有的：

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)，因为它是在几个不同的事件中触发的，并且代码不会检查它是否已经在运行。

我建议在调用timer

之前检查setInterval的值

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。

setInterval（）在几个周期后加速/减慢函数传播

1 个答案: