Почему Mozilla Firefox игнорирует свойство объекта в условии?

Question

[wbrapist]

Здравствуйте.
Делаю задержку между событиями (клик), чтобы нельзя было много раз нажать кнопку, дабы избежать наложения анимаций.
В начале события устанавливается свойство, которое рано true. В конце события свойство становится false. В начале событие стоит if, который проверяет в каком состоянии сейчас свойство. Если false - всё ок, предыдущее событие завершено, если true - старое событие еще обрабатывается - выход из нового события.
В Хроме и Опере всё нормально. Работает как надо. В Mozilla другая ситуация.
Условие почему-то не срабатывает. Скрин:

Mozilla и Chrome's dev tools

Вот рабочий код, на jsfiddle всё работает нормально, как и в Chrome.
https://jsfiddle.net/wbrapist/43mc1hsy/

Answer 1

[wbrapist]

Проблема была именно в том, что задержки от setTimeout в Mozilla не было.
Задержка передавалась в виде аргумента-переменной, в которую записывалось значение transition из CSS.

setTimeout(function() {
        slides[slidesNumber - 1].style.opacity = '0';
      },animateDuration + 50);

Чтобы получить значение animateDuration было сделано следующее:

var slides           = document.getElementsByClassName('slide');  // находим сам слайд
var computedSlides   = getComputedStyle(slides[0]);  // получаем css элемента
var slidesTransition = computedSlides.transition; // получаем все значения transition
var arrayStyleSlides = slidesTransition.split(' ');  // разбиваем строку на отдельные "слова"
var animateDuration  = parseFloat(arrayStyleSlides[1]) * 1000; // вытаскиваем второе "слово" - значение длительности анимирования

Как оказалось, строка:
var slidesTransition = computedSlides.transition;

Возвращала строку со всеми значениями составного свойства transition в виде:
all 2s ease

Но это работает только в Chrome, в Mozilla почему-то возвращалась просто пустая строка (видимо, все значения составного свойства в Mozilla не получить, а может быть здесь только с этим свойством такое поведение).

В итоге, для получения значения длительности transition строку:
var slidesTransition = computedSlides.transition;

Заменил на:

var slidesTransition = computedSlides.transitionDuration;

Ну, и соответственно, следующая инструкция уже не нужна:

var arrayStyleSlides = slidesTransition.split(' ');

И здесь пара изменений:

var animateDuration  = parseFloat(slidesTransition) * 1000;

Answer 2

[Павел Корнилов]

Попробуй как-то так:

var currentSlide     = 0;
var prevSlideItem    = 0;
var sliderWidth      = getComputedStyle(document.getElementsByClassName('slider')[0]).width;
var slides           = document.getElementsByClassName('slide');
var computedSlides   = getComputedStyle(slides[0]);
var slidesTransition = computedSlides.transition;
var arrayStyleSlides = slidesTransition.split(' ');
var animateDuration  = parseFloat(arrayStyleSlides[1]) * 1000; // получить второе значение из transition (это продолжительность анимации)
var slidesNumber     = slides.length;
var inners           = document.querySelectorAll('.slider .navigation .inner');

nextSlide();

function nextSlide() {
  var nextSlideButton  = document.querySelector('.next-slide');
  inners[currentSlide].className += ' ' + 'active-inner';

  nextSlideButton.onclick = function () {
    console.log('proc = ' + this.proc + ' на входе');
    if (this.proc == 1)
      console.log('Слайд не должен поменяться');
    // Проверяем, происходит ли обработка события, чтобы не было наложения анимаций.
    if (this.proc) return false;
    

    currentSlide++;

    if (currentSlide > slidesNumber - 1)
      currentSlide = 0;

    if (currentSlide !== 0) {
      slides[currentSlide - 1].style.left = sliderWidth;
      slides[currentSlide].style.opacity = '1';

      setTimeout(function() {
        slides[currentSlide - 1].style.opacity = '0';
      },animateDuration + 50);

      setTimeout(function() {
        slides[currentSlide - 1].style.left = '0px';
        nextSlideButton.proc = 0;
      },animateDuration * 2);

      prevSlideItem = currentSlide - 1;

    } else {
        slides[slidesNumber - 1].style.left = sliderWidth;
        slides[currentSlide].style.opacity = '1';

        setTimeout(function() {
        slides[slidesNumber - 1].style.opacity = '0';
      },animateDuration + 50);

      setTimeout(function() {
        slides[slidesNumber - 1].style.left = '0px';
        currentSlide
        nextSlideButton.proc = 0;
      },animateDuration * 2);

      prevSlideItem = slidesNumber - 1;
	}
	
	this.proc = 1
	console.log(this.proc + ' событие запущено, proc = 1');
	
  };
}

Comments

[wbrapist]

Работает так же. Такое ощущение, как-будто сообщение не выводится лишь потому, что что-то не так с setTimeout, как-будто не работает задержка, но тела выполняются. В итоге - сообщение о том, что событие уже стартануло не выводится, т.к. тело события выполняется "мгновенно".
Но если так, то хрен поймешь, почему именно в Mozilla такое поведение.

[Павел Корнилов]

wbrapist: Да, странно, Мозилла - самый адекватный броузер. У меня как раз именно с ней проблем никогда не возникало.

[wbrapist]

KorniloFF: ответ выше. На learn.javascript сегодня прочитал, что если пытаться получить составное css свойство - поведение непредсказуемо, что и вылилось в мою проблему.
Ссылку не приведу, неудобно с телефона.

[Павел Корнилов]

wbrapist: понятно. Не помню, чтобы с таким сталкивался. Вообще стараюсь не использовать дефисов в именах классов, то есть, не делать их составными.

[wbrapist]

KorniloFF: я про CSS-свойства, а не про классы.

[wbrapist]

KorniloFF: возможно, у меня проблемы с терминологией.
Вот вырезка:

"getComputedStyle требует полное свойство!
Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderLeftWidth.

При обращении к сокращенному: padding, margin, border – правильный результат не гарантируется."
learn.javascript.ru/styles-and-classes

[Павел Корнилов]

wbrapist: все, теперь уразумел. Кстати да, с этим я сталкивался как-то. Действительно, лучше не использовать сокращенные свойства, при обращении из JS. Ну, главное, стало понятно, почему броузеры неоднозначно реагировали на код.