SetTimeout задерживается между вызовами в Firefox - PullRequest
Новая
       10

SetTimeout задерживается между вызовами в Firefox

0 голосов
/ 18 сентября 2018

Я пытаюсь оптимизировать свой код, чтобы быстро и эффективно прокручивать изображения на заставочной странице. У меня это выглядит очень гладко на Chrome и Safari, но когда я просматриваю заставку на мобильном телефоне и Firefox, это вызывает ошибки

Демо можно найти на http://theotherchrisrock.com

Мне бы очень хотелось услышать ваше мнение о том, как это исправить. Вот соответствующий код: 

var i = 0
var j = 0
var l = $('.se-pre-con > div').length - 2;
var $pre_con = $('.se-pre-con');
var $di_sum = $('.splash-image:last-child');
var $img_array = [];
for (t = 0; t < l; t++) {
  $img_array[t] = $('.splash-image-' + t);
}

function flashanimation() {

  if (i < l) {
    $img_array[i].addClass('flash');
    i++;
    flashloop();
  } else if (j != 1) {
    $di_sum.addClass('di-some');
    j = 1
    flashloop();
  } else {
    $pre_con.addClass('nun');
  }
}

function flashloop() {
  setTimeout(function() {
    flashanimation();
  }, 300)
}

$(".blinker").removeClass("blinker");
flashloop();

По сути, цель состоит в том, чтобы заставить изображение появиться на 150 мс, а затем исчезнуть на 150 мс, а затем появится следующее изображение и так далее, наконец, заканчивая просто черным div. Прямо сейчас я добавляю класс к каждому div, который запускает эту анимацию ключевого кадра ~ 

.splash-image.flash {
    -webkit-animation:flash 0.15s linear;
            animation:flash 0.15s linear;
    -webkit-animation-delay:0.15s;
            animation-delay:0.15s;
    display:block;
    opacity:0;
}
@-webkit-keyframes flash {
    0% {
        opacity:0;
    }
    1% {
        opacity: 1;
    }

    100% {
        opacity:1;
    }
}
@keyframes flash {
    0% {
        opacity:0;
    }
    1% {
        opacity: 1;
    }

    100% {
        opacity:1;
    }
}

Я бы хотел услышать ваше мнение. Спасибо за просмотр моего вопроса

...