Mr_Sergo
@Mr_Sergo

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

Приветствую форумчане! Никак не пойму как правильно удалить 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; }


Или, все-таки, я сделал все правильно и глюк в песочнице?? Прошу помощи.
  • Вопрос задан
  • 160 просмотров
Решения вопроса 1
Xuxicheta
@Xuxicheta
инженер
простой тест в jsfiddle
window.onfocus = () => console.log('focus');
window.onblur = () => console.log('blur');

сворачиваем/разворачиваем - ничего не присходит.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@GreatRash
В песочнице код выполняется во фрейме, соответственно window ссылается не на верхнее окно браузера, а на окно фрейма. А оно не блюрится. Можно проверить написав туда alert, есть мнение, что он не всплывёт.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы