Есть ли событие в Javascript, которое срабатывает, когда пользователь меняет вкладки в браузере

Question

Позвольте мне начать с проблемы: Chrome ведет себя странно при использовании setTimeout (), если пользователь меняет вкладки браузера, выполнение Javascript останавливается / приостанавливается. После того, как пользователь вернется обратно, Chrome хочет наверстать упущенное, поэтому анимация не учитывает тайм-аут и выходит из-под контроля.

Я пытаюсь запретить Chrome ускорять анимацию, если пользователь возвращается через некоторое время. В другом вопросе я обнаружил, что jQuery предлагает событие .blur & .focus, но, похоже, тоже не работает:

$(window).blur(function() {
  clearTimeout(timer) 
})

Есть ли способ остановить анимацию в тот момент, когда пользователь меняет вкладки, или нет события, которое запускается сразу после того, как пользователь меняет вкладки?

Answer 1

В большинстве современных браузеров, когда вкладка не в фокусе, тайм-аут перестает срабатывать так часто, поэтому вы видите, что анимация приостановлена ​​/ дрожит.Это намеренно.

Существует замечательная статья о Mozilla , в которой объясняется, как написать некоторую логику, которая будет обрабатывать анимацию, когда вкладка не в фокусе.Он даже включает небольшую кросс-браузерную библиотеку под названием animLoop.js , чтобы помочь вам.Примеры также будут работать в Chrome.

Answer 2

Я не знаю, как это сделать с помощью jQuery, но в чистом js вы можете сделать что-то вроде этого:

<script>
function onBlur() {
    clearTimeout(timer);
};
if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusout = onBlur;
} else {
    window.onblur = onBlur;
}
</script>

Убедитесь, что переменная timer находится в видимой области видимости.

Answer 3

Существует API видимости страницы.Его основное назначение - уведомлять страницу, когда пользователь показывает / скрывает вкладку или окно с ней.API не завершен, но работает в нескольких браузерах, включая Chrome.Подробнее об этом можно прочитать в блоге Николаса Закаса .