setInterval在Chrome上不能正常工作

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.

我有一个定制的slideshow对象来执行通常的东西，名字在网站上表示。这一切都很好，除了当我在Chrome中切换标签回到网站标签。当这种情况发生时，幻灯片就会变得疯狂，开始对图像进行退色，而不考虑给定的setInterval间隔。找不到任何与此相关的东西，所以我想至少知道这是代码的问题还是软件的问题。

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

下面是代码(与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();

});

4 个解决方案

#1

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.

我更喜欢重复地使用setTimeout()，而不是使用setInterval()——在setInterval()中，很多事情都可能出错，而且您不知道浏览器有多忙，也不知道这个间隔是否真实。

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.

浏览器并不完全认可您所选择的超时或间隔。这主要是为了安全;防止大量事件干扰浏览器正常运行的功能。Chrome更好的是更准确地使用计时器，但当标签在后台时(见此答案)，它仍然会显著降低它的速度。

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.

如果您在对slideshow.action()的现有调用中设置了一个带有setTimeout的新计时器，那么当浏览器不能很好地跟上时，您不会让事件排队，但当浏览器能够做到这一点时，它仍然运行得很好，而且运行得很快。

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

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

4 个解决方案

#1

更多相关文章

随机推荐