Проблема с методом класа

Question

Я хочу, чтобы звездочки мигали с разной амплитудой. На пару секунд включается гифка, а потом назад статичное изображение. Прикрепляю ссылку на пример.

https://codepen.io/misha-web00/pen/ZERedBb

(подождите пару секунд, пока картинки с имгура в кеш не сохранятся)

Проблема в том, что когда одна звездочка, то всё нормально, но если их 2 и больше, то они начинают конфликтовать и "перебивать" анимацию друг друга. Почему это происходит, если я везде использую только this, который должен брать заложеную в клас переменную?

Уверен, я не учел какуе-то очевидную вещь, но не могу понять что именно :(

Снизу прикрепляю сам код

//STAR FUNCTIONs

//рандомне число
function getRandomInt(max) {
  return Math.trunc(Math.random() * max);
}

//схема така: ми включаєм гіфку, а потім на рандомну кількість секунд вимикаємо гіфку.

class star{
    //e = elm
    constructor(e){
        this.e = e;
    }
    
    star_light_method(){
        setTimeout(() => {
            this.e.src = 'https://i.imgur.com/yaqgXRr.gif';
            setTimeout(() => {
                //gif анімація триває приблизно 2,5s
                this.e.src = 'https://i.imgur.com/eBFYlUI.png';
                this.star_light_method();
            },2490)
        }, getRandomInt(5000))
    }
}

function star_light_start_func(){
    //спочатку запишемо усі картинки в массив.
    star_element_container = document.querySelectorAll('.star');
    star_container = [];
    i = 0;
    for (let elm of star_element_container){
    //присвоїмо їм клас і зразу запустимо метод, який потім буде сам себе запускати.
        star_container[i] = new star(elm);
        star_container[i].star_light_method();
        i += 1;
    }
}
star_light_start_func();

.img_star{
  height:90px;
  width:90px;
}
body{
  background-color:rgba(0,0,0,1);
}

<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">

Answer 1

Понятно, оказывается, сам код рабочий, но одинаковые гиф сбивают друг другу анимацию. Но стоит указать, к примеру, версию (например img.gif?v=1), или ссылку на другую гиф, как эта проблема исчезает. Я лично проверил это, вот ссылка https://codepen.io/misha-web00/pen/eYKWZJQ - уберите в js версию, и крайние звезды будут лагать/одновременно воспроизводиться, что невозможно из-за указаного в setTimeout времени (разница начала цикла анимации в 600мс).

Поэтому я решил эту проблему просто передавая в конструктор класса также версию (номер массива), а версию добавлял к названию ресурса гифки.

//при создании объектов
star_container[i] = new star(elm,i);

//конструктор класса
constructor(e,number){
  this.e = e;
  this.version = number + 1;
}

//в setTimeout
this.e.src = 'https://i.imgur.com/yaqgXRr.gif?v=' + this.version;

(Это изменение уже сохранено на кодепен, который в вопросе. То есть истинную проблему можно увидеть только в приложеном к вопросу коде. Впрочем, вряд-ли это кому-то понадобиться...)

БЛОГ НА HUSL

Проблема с методом класа

Ответы (1 шт):