Как правильно установить и удалить setInterval?

Question

[Mr_Sergo]

Приветствую форумчане! Никак не пойму как правильно удалить setInterval по событию blur. Пол ночи просидел- не пойму и все, уже голова пухнет, что-то делаю не так, но что?? вообще не вкурю. На локальном серваке все работает как задумано- по focus интервал устанавливается, по blur удаляется, одним словом работает четко. Но когда я залил на jsfiddle там работает иначе- интервал по blur не удаляется, то есть если свернуть окно браузера на 5 секунд то после развертывания окна карусель начинает вращаться как бешенная. Помогите понять почему так происходит и какие изменения внести в код что бы работало норм.
Погавнокодил в песочнице:
https://jsfiddle.net/zlojnaxa/szx2qo59/1/
Привожу код здесь:

spoiler

<div class="container">
    <div class="carousel">
        <div class="item a"></div>
        <div class="item b"></div>
        <div class="item c"></div>
        <div class="item d"></div>
        <div class="item e"></div>
        <div class="item f"></div>
    </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

autoCarousel3D("next",1000);

function autoCarousel3D(direction,speed) {
    var interval = setInterval(function(){ rotate(direction); },speed);
    var deg = 0;
    var carousel = document.getElementsByClassName('carousel')[0];

    window.onblur = function(){
        clearInterval(interval);
    }
    window.onfocus = function(){
        interval = setInterval(function(){rotate(direction);},speed);
    }

    document.getElementsByClassName('next')[0].addEventListener('click',function(){
        rotate("next");
    },false);

    document.getElementsByClassName('prev')[0].addEventListener('click',function(){
        rotate("prev");
    },false);

    function rotate(x){
        if(x=="next"){
            deg -= 60;
        }
        if(x=="prev"){
            deg += 60;
        }
        carousel.style.webkitTransform = "rotateY("+deg+"deg)";
        carousel.style.MozTransform = "rotateY("+deg+"deg)";
        carousel.style.OTransform = "rotateY("+deg+"deg)";
        carousel.style.transform = "rotateY("+deg+"deg)";
    }
}

html, body{margin: 0px 0px 0px 0px; width:  100%;}

body {
    background: #333;
    padding: 70px 0;
    font: 15px/20px Arial, sans-serif;
}

.container {
    margin: 0 auto;
    width: 250px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.item {
    display: block;
    position: absolute;
    background: #000;
    width: 250px;
    height: 200px;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 10px;
}

.a {
    transform: rotateY(0deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/363000/362381/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -50px;
}
.b {
    transform: rotateY(60deg) translateZ(250px);
    background-image: url(https://d37ta6l1gshlok.cloudfront.net/photo/7529/2747529-3c1c3ec201767d35a8fce728dca3f359-0-preview.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -50px;
}
.c {
    transform: rotateY(120deg) translateZ(250px);
    background-image: url(https://img-android.lisisoft.com/imgmic/6/7/2576-i-nanjing.myring.SMSRingtone.jpg);
    background-repeat: no-repeat;
    background-size: 280px;
    background-position: -20px -50px;
}
.d {
    transform: rotateY(180deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/321000/320709/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -40px;
}
.e {
    transform: rotateY(240deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/319000/318193/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 260px;
    background-position: 0px -20px;
}
.f {
    transform: rotateY(300deg) translateZ(250px);
    background-image: url(http://www.tuning.bg/public/upload/news/4488/300x300/New-Aston-Martin-Vanquish-12.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -50px;
}

.next, .prev {
    color: #444;
    position: absolute;
    top: 100px;
    padding: 1em 2em;
    cursor: pointer;
    background: #CCC;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
    top: 104px;
    box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }

Или, все-таки, я сделал все правильно и глюк в песочнице?? Прошу помощи.

Answer 1

[Антон Швец]

простой тест в jsfiddle

window.onfocus = () => console.log('focus');
window.onblur = () => console.log('blur');

сворачиваем/разворачиваем - ничего не присходит.

Comments

[Mr_Sergo]

воо спасибо, так наглядней, теперь понял что пол ночи просидел за зря :) эхх...

[Антон Швец]

zlojnaxa, и вообще тикалку удобней сделать на таймаутах

let timeout = 1;

window.onfocus = () => {
	console.log('focus', {timeout})
  if (!timeout) tick();
}
window.onblur = () => {
	console.log('blur', {timeout});
	timeout = clearTimeout(timeout);
}

function tick() {
	console.log('tick', {timeout});
  timeout = setTimeout(tick, 1000);
}
tick();

Answer 2

[GreatRash]

В песочнице код выполняется во фрейме, соответственно window ссылается не на верхнее окно браузера, а на окно фрейма. А оно не блюрится. Можно проверить написав туда alert, есть мнение, что он не всплывёт.

Comments

[Mr_Sergo]

В песочнице код выполняется во фрейме

Нуу так код вроде написан правильно, да?, я имею ввиду что blur и focus я, вроде, использовал правильно?

[Mr_Sergo]

Да вот кстати дело не во фрейме, вот ссылка на тот фрейм только в полный экран(не во фрейме соответственно):
https://fiddle.jshell.net/zlojnaxa/szx2qo59/1/show/

[Mr_Sergo]

ссори соврал, это тоже фрейм

[Pavel Shvedov]

zlojnaxa, я бы дополнительно в начале кода, и после вызова clearInterval устанавливал interval в null, при старте анимации проверял бы interval на не null, и в случае когда значение в переменной не равно null, это значит, что ранее setInterval уже стартовал и его сначала нужно стопнуть, перед тем как запускать новый, а то есть шанс, что установленный ранее интервал перезатрется новым и стопнуть его мы уже не сможем

[Mr_Sergo]

Pavel Shvedov, Спасибо большое, для меня это ценный совет.

[Mr_Sergo]

Pavel Shvedov, а логика использования setInterval'а верна? имею ввиду, по блур удалить а по фокус вернуть на место.