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

Question

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

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

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

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

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

Решение:

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

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

Answer 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 мс (вместо 10 мс, которые он использовал для зажима).

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

Answer 2

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

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

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

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

Возможные способы обойти это:

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

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

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

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

Answer 3

попробуй 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>

Answer 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 (интервал);

Answer 5

Вы пытались вообще не использовать 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);