JQuery setInterval слишком быстро при переходе с другой вкладки

У меня есть сайт с бесконечно скользящими изображениями, используя функцию jquery setIntervall().

При вызове страницы в Chrome 13 и переключении на другую вкладку, чтобы вернуться через несколько секунд, ускорение изображения происходит быстрее, как если бы оно старалось идти туда, где было, если бы он не переключился на другую вкладку.

Как я могу решить эту проблему?

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").animate({left: -1 * offset}, 1000);
}

Решение:

Я выбрал jfriend00 сначала советую. Теперь я выключаю таймер, когда окно становится неактивным.

Простой код для этого можно найти here.

ОТВЕТЫ

Ответ 1

В начале я хотел бы извиниться за все ошибки - мой английский не идеален.

Решение вашей проблемы может быть очень простым:

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}

Неактивные вкладки браузера содержат некоторые функции setInterval или setTimeout. stop (true, true) - остановит все буферизованные события и выполнит незаметно только последнюю анимацию. Эта проблема также появится в Firefox > 5.0 - прочитайте эту статью: Firefox 5 - изменения

Теперь метод window.setTimeout() зажимает для отправки не более одного тайм-аут в секунду на неактивных вкладках. Кроме того, теперь он захватывает вложенные таймауты до наименьшего значения, допускаемого спецификацией HTML5: 4 ms (вместо 10 мс, которые он использовал для фиксации).

здесь вы можете прочитать, как работает анимация - он многократно запускает функцию setInterval. Как анимация действительно работает в jQuery

Ответ 2

Последние версии Chrome, по-видимому, замедляют работу setInterval, когда вкладка находится в фоновом режиме, а затем, когда вы переносите эту страницу вперед, она пытается догнать.

В блоге Chromium Google сказал:

В предстоящем выпуске Chrome 11 мы планируем сократить потребление ЦП даже на страницах, которые используют setTimeout и setInterval. Для фоновых вкладок мы намерены запускать каждый отдельный таймер не чаще одного раза в секунду. Это изменение уже реализовано в канале Chrome dev и канарейках.

Ваш интервал составляет 3,5 секунды, но сама анимация может использовать гораздо более короткие таймеры.

Возможные способы обхода:

  • Остановите свой таймер/анимацию, когда окно не видно. Перезапустите таймер/анимацию, когда окно станет видимым.
  • Вместо setInterval используйте setTimeout, а затем просто reset setTimeout каждый раз, когда он запускает ваш собственный повторяющийся интервал - хотя в вашем случае это может быть использование jQuery таймеров, которые являются проблемой - я не знаю.
  • Замедляйте свои таймеры, чтобы они не зависели от этого (опять же, возможно, внутри jQuery не ваши собственные таймеры).

Лучший вариант - это, вероятно, выяснить, когда нужно просто остановить и перезапустить анимацию.

Аналогичный вопрос: Chrome: тайм-ауты/интервал приостановлен на вкладках фона?.

FYI, Chrome имеет новый экспериментальный API для обнаружения видимости страницы именно по этой причине. Вы можете прочитать об этом здесь: http://code.google.com/chrome/whitepapers/pagevisibility.html. он помогает решить проблему, когда ваша страница видна, но не имеет фокуса.

Ответ 3

Вы вообще не пытались использовать setInterval или setTimeout, но просто используйте функцию complete функции animate, чтобы начать следующий слайд? Для функции delay установлено значение 2500 (то есть 1000 для анимации, вычитаемого из 3500 из setInterval). Я не пробовал это с Chrome, поэтому, пожалуйста, дайте мне знать, если он работает.

var slider = function(n){
    $("#slideContent").delay(2500).animate({left: -1 * n * delta},
                                           1000,
                                           function(){slider(n+1)}
                                          );
};
slider(1);

Ответ 4

Эй вы используете JQuery 1.6?

Это может быть причиной, так как 1.6 использует requestAnimationFrame для анимации. Вы можете проверить эту страницу для замены setInterval, clearInterval

http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/

код: https://gist.github.com/1002116 [edit: обновленный источник, edit2: в настоящее время не работает с firefox из-за ошибки firefox. - Я перешел на JQuery 1.5]

Из блоггера:

Затем, когда вы вызывали setInterval (func, poll), вы теперь вызываете requestInterval (func, poll). Когда вы вызываете clearInterval (интервал), вы теперь вызываете clearRequestInterval (интервал);

Ответ 5

попробуйте setInterval() он работает

<script type="text/javascript" src="js/jquery-1.5.js"></script>
        <script type="text/javascript">
            var i=1;
            $(document).ready(function(){
                slideShow();
                $("#next").click(function(){
                    slideShow();
                });
            });
            function slideShow(){
                if(i<3){
                    $("#slide-container").animate({ left:"+=35px" }, {  duration:500})
                    $("#slide-container").animate({ left:"-=735px" }, {  duration:250})
                    i++;
                }
                else {
                    $("#slide-container").animate({ left:"+=1400px" }, {  duration:1000})
                    i=1;
                }
                setTimeout('slideShow()',2000);
            }
    </script>