setInterval在Chrome上无法正常运行 [英] setInterval not working properly on Chrome

问题描述

我有一个自定义幻灯片对象来执行名称在网站上指示的常用内容。除非我在Chrome中切换标签并返回网站标签，否则一切正常。当发生这种情况时，幻灯片放映并开始淡化图像，而不考虑给定的 setInterval 间隔。找不到与此相关的任何问题，所以我想至少知道这是代码或软件问题是否存在问题。

I have a custom made slideshow object to perform the usual stuff the name indicates on a website. It all works well except when I switch tabs in Chrome and come back to the website tab. When that happens, the slideshow goes nuts and starts fading the images disregarding the setInterval interval given. Can't find anyhing related to this, so I'd like to at least know if it's a problem with the code or a software issue.

这是代码（正在进行中）与jQuery一起使用）：

Here's the code (being used with jQuery) :

$(function() {

    // slideshow
    var slideshow = {
        id : false,
        current : 0,
        count : 0,
        interval : false,
        init : function(data) {
            if (!data)
                return false;

            $.each(data, $.proxy(
                function(index, value) {
                    this[index] = data[index];
                }, this)
            );

            this.count = this.images.length;

            for (x=1;x<=this.count;x++)
                $('#slider ul.nav').append('<li></li>');

            $('#slider ul.nav li').live('click', function()
            {
                slideshow.click(this);
            });

            $('#slider ul.nav li:eq(0)').addClass('on');
            $('#slider ul.nav').css('width', (15*this.count)+'px');

            return true;
        },
        start : function () {
            slideshow.id = setInterval(function() { slideshow.action(); }, slideshow.options.interval);
        },
        stop : function() {
            clearInterval(slideshow.id);
        },
        action : function() {
            slideshow.current < (slideshow.count-1) ? slideshow.current++ : slideshow.current = 0;

            $('#slider img').fadeOut('normal', function() {
                $('#slider img').attr('src', slideshow.images[slideshow.current].url);
                $('#slider ul.nav li').removeClass('on');
                $('#slider ul.nav li:eq('+slideshow.current+')').addClass('on');
                $('#slider div.title').html(slideshow.images[slideshow.current].title);
                $('#slider div.description').html(slideshow.images[slideshow.current].description);
                $('#slider a.more').attr('href', slideshow.images[slideshow.current].target);
            }).fadeIn('normal');

            return true;
        },
        click : function(o) {
            slideshow.stop();

            var index = $('#slider ul.nav li').index(o);
            slideshow.current = index;

            $('#slider img').fadeOut('normal', function() {
                $('#slider img').attr('src', slideshow.images[index].url);
                $('#slider ul.nav li').removeClass('on');
                $(o).addClass('on');
                $('#slider div.title').html(slideshow.images[index].title);
                $('#slider div.description').html(slideshow.images[index].description);
                $('#slider a.more').attr('href', slideshow.images[index].target);
            }).fadeIn('normal');

            slideshow.start();
            return true;
        },
    };

    slideshow.init(slider);
    slideshow.start();

});

推荐答案

我倾向于反复使用setTimeout（） setInterval（） - setInterval（）会出现很多问题，你不知道浏览器的繁忙程度以及间隔是否真实。

I'd favour using setTimeout() repeatedly over using setInterval() - so many things can go wrong with setInterval() and you don't know how busy the browser is and whether the interval is realistic.

Browsers don' t准确地尊重您选择的超时或间隔。这主要是为了安全;防止大量事件搞乱浏览器正常运行的能力。 Chrome更适合更准确地兑现计时器，但当选项卡处于后台时，它仍会显着降低计时器的速度（请参阅此答案），例如。

Browsers don't honour your chosen timeout or interval exactly. This is mainly for security; to prevent a flood of events from messing with the browser's ability to function normally. Chrome is better about honouring timers more accurately, though it does still slow them down significantly when a tab is in the background (see this answer), for example.

如果您在现有通话期间使用setTimeout设置新计时器to slideshow.action（），那么当你的浏览器无法跟上时，你就不会让事件排队，但是当浏览器能够这样做时它仍会很好而且很快。

If you set a new timer with setTimeout during your existing call to slideshow.action(), then you won't get events queuing up when your browser can't quite keep up, but it will still go nice and quickly when the browser is able to do so.

您仍然可以使用计时器ID停止计时器，该ID只会经常更改。

You will still be able to stop the timer using the timer ID, that ID will just change often.

这篇关于setInterval在Chrome上无法正常运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！