Как задать общую функцию каждому элементу массива

Question

Есть ряд картинок (в данном случае рыбы), после window.onload объекты начинают курсировать вперед-назад (с определенным интервалом). В целом функция работает, проверял на одном объекте, загвоздка возникла когда попытался применить ее ко всем элементам, ничего не работает. Если можете, то объясните где я не правильно применил цикл for of. Спасибо!

Пример:

window.onload = function() {
    let fishs = document.querySelectorAll('.fish');
    for (let elem of fishs){
        let time = 1;   
            function go(){
            if(time%2){
                elem.classList.remove('back');
                elem.style.marginLeft = 60 * time + 60 + 'px';
                } else {
                elem.classList.add('back');
                elem.style.marginLeft = 50 * time - 60 + 'px';  
                }           
            }

        go();
        elem.addEventListener('transitionend',function(){
            time++;
            go();
        });
    }   
};

Answer 1

Старайтесь не делать те действия, какие можно вынести за цикл. В данном случае это касалось метода "go". Проверьте, так ли должен работать код. Если хотите с интервалом ( чтобы они не вместе были,а отдельно воспользуйтесь таймерами)

window.onload = function() {
    let fishs = document.querySelectorAll('.fish');
    for (let elem of fishs){

        let time = 1;  
        go(elem, time);
        elem.addEventListener('transitionend',function(){
            time++;
            go(elem, time);
        });
    }   

    function go(elem, time){
            if(time%2){
                elem.classList.remove('back');
                elem.style.marginLeft = 60 * time + 60 + 'px';
                } else {
                elem.classList.add('back');
                elem.style.marginLeft = 50 * time - 60 + 'px';  
                }           
            }
};

Возможно интересовала версия с таймером:

window.onload = function() {
    let fishs = document.querySelectorAll('.fish');
    let index = 0;
     for (let elem of fishs){

       setTimeout(()=>{
             let time = 1;  
        go(elem, time);
        elem.addEventListener('transitionend',function(){
            time++;
            go(elem, time);
        }); 
       }, ++index*110)

    }   
          function go(elem, time){
            if(time%2){
                elem.classList.remove('back');
                elem.style.marginLeft = 60 * time + 60 + 'px';
                } else {
                elem.classList.add('back');
                elem.style.marginLeft = 50 * time - 60 + 'px';  
                }           
            }
};

Версия с рандомом

window.onload = function() {
    let fishs = document.querySelectorAll('.fish');
     for (let elem of fishs){
       setTimeout(()=>{
             let time = 1;  
        go(elem, time);
        elem.addEventListener('transitionend',function(){
            time++;
            go(elem, time);
        }); 
       }, ~~(Math.random()*2000))

    }   
          function go(elem, time){
            if(time%2){
                elem.classList.remove('back');
                elem.style.marginLeft = 60 * time + 60 + 'px';
                } else {
                elem.classList.add('back');
                elem.style.marginLeft = 50 * time - 60 + 'px';  
                }           
            }
};

БЛОГ НА HUSL

Как задать общую функцию каждому элементу массива

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