wbrapist

learn.javascript.ru

Всё оказалось довольно банальным. Я почему-то думал, что при подключении скрипта, атрибут defer ждёт полной загрузки страницы, в итоге, так и есть, но defer не ждёт загрузки внешних подключаемых ресурсов, как я понял:

It's a bad idea to use the document when it's not fully loaded. Depending on the time it takes to load it, your values are going to be different. That's why you get different behaviors.

To solve this, just wait for the document to be loaded by wrapping your code like this:

window.addEventListener('load', function(){
    /* ...YOUR CODE GOES HERE... */
});

When you load a page, 2 main events are fired: DOMContentLoaded, when the DOM is ready (All the HTML is loaded). Then, a load event fires when all external resources (CSS, images) are loaded. Using defer waits for the first event to fire, but not the other one. In your case, I think it is the CSS that was causing a problem. It was not loaded yet

stackoverflow.com/questions/45702723/

Может быть мои знания английского не позволяют мне понять, но вроде как ответ постом выше немного отличается от того, что написано на MDN:

defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

То есть, грубо говоря, как я понял, происходит 3 этапа:
- Страница парсится
- Загружается HTML
- Загружаются внешние ресурсы

UPD: Критический путь рендеринга веб-страниц

Функции в JS возвращают undefined, если не указано обратное.

https://jsfiddle.net/wbrapist/c3xfr9bc/

Прошёл по ссылке:

But the two are different. A function value can do all the things that other values can do—you can use it in arbitrary expressions, not just call it. It is possible to store a function value in a new place, pass it as an argument to a function, and so on. Similarly, a variable that holds a function is still just a regular variable and can be assigned a new value

Но typeof считает, что функция :) Разница конечно есть.

Проблема была именно в том, что задержки от 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;