Приостановить анимацию при выходе из окна или войти в новую вкладку, продолжить анимацию при повторном входе?

Question

Я работаю над этой отличной анимацией логотипа и сталкиваюсь с нечеткой проблемой. Если вы оставите вкладку с анимацией в ней и повторно введите вкладку через пару минут позже. Анимация (Усыпляет) и вращает кучу раз и супер быстро. Это происходит только при выходе и повторном входе в окно после лилия.

Так что я думал, что решение может состоять в том, чтобы просто приостановить анимацию, покидая вкладку, а затем снова запустите ее после повторного входа на вкладку. Считаете ли вы, что это решило бы мою проблему? Если да, то как вы примените его к моей текущей анимации?

Спасибо!

JS FIDDLE

Answer 1

Вам необходимо добавить прослушивателей событий в самое окно для фокуса и событий размытия.

Проверьте это:

http://fiddle.jshell.net/6gdrQ/15

Answer 2

При задании интервала времени он возвращает идентификатор, который может быть использован для остановки интервала цикла.

var id; 
$(window).focus(() => { 
    //enter tab stuff here 
    id = setInterval(rotate, 7500); 
}); 
$(window).blur(() => { 
    //leave tab stuff here 
    window.clearInterval(id); 
});