1

Ahora mismo tengo un array de 6 objetos, los cuales son estos:

window.addEventListener('load',()=>{

    const ent = [
    entity( 'pj1' ,9999, 255, 255, 255, 100, 1, 1.8),
    entity( 'pj2' ,9999, 255, 255, 255, 100, 1, 2.4),
    entity( 'pj3' ,9999, 255, 255, 255, 100, 1, 1.95),
    entity( 'ARMA Rubi' ,800000, 180, 200, 180, 100, 1, 0.8),
    entity( 'Arm 1' ,180000, 120, 100, 0, 100, 1, 1.55),
    entity( 'Arm 2' ,180000, 60, 120, 120, 100, 1, 1.45)
    ];
    
    selectTurn(ent);
});


function entity(name, hp, atk, def, mag, agi, vel, trn){
    return {
        name : name,
        hp : hp,
        atk: atk,
        def: def,
        mag: mag,
        agi: agi,
        vel : vel,
        trn : trn
    };
}

Cada objeto contiene los atributos de los 3 personajes y de los 3 enemigos. De dichos atributos, utilizo vel y trn para seleccionar el turno de cada uno, haciendo que vel sume constantemente el valor de trn, al ser dispares, uno llegará antes que otros.

El turno llega cuando el atributo vel de cualquier entidad llega a 100, le tocaría el turno:

function selectTurn(arg){
    let turn = setInterval(function(){

        for(i=0;i<arg.length;i++){
            arg[i].vel += arg[i].trn;
            document.querySelectorAll('.turn-rest')[i].style.width=arg[i].vel+'px';

            if(arg[i].vel >= 100){
                document.querySelectorAll('.turn-rest')[i].style.width='0px';
                clearInterval(turn);
                arg[i].vel = 1;
            }
        }
    },100);
}

Para aclarar, .turn-rest es la clase de la barra de tiempo del turno. Dicha barra añade arg[i].vel en pixeles, ya que es el valor que se va incrementando constantemente hasta cierto punto.

Sumo y adiciono el valor vel ya que cuando le toque el turno a uno, y su velocidad se resetee, las demás seguirán teniendo la vel donde la dejaron.

Pero como recomendacion me han dicho que no use un querySelectorAll dentro del bucle for, aunque vaya acompañado del [i], no entiendo el por qué de la recomendación.

Otra opción es como el amigo @Pablo Lozano sugiere, con un forEach:

function selectTurn(arg) {
  const elements = document.querySelectorAll('.turn-rest');
  const turn = setInterval(() => {
    arg.forEach((item, index) => {
      item.vel++;
      if (item.vel >= 100) {
        item.vel = 0;
      }
      elements[index].style.width = item.vel + 'px';
    }, 100);
  });
}

Aquí tengo la duda, entiendo que es mejor esta opción, pero, ¿por qué concretamente?

Es decir, entiendo que asignar una variable, lo que lee el ordenador, es el valor de la variable es decir, da igual poner:

const element = document.querySelector('.clase')

element[index]

Que poner directamente:

document.querySelectorAll('.clase')[index]

¿No sería lo mismo computacionalmente?

1 respuesta 1

1

No, no es lo mismo:

El método document.querySelectorAll, como su nombre indica, es una query (petición) al DOM para buscar todos los elementos que cumplan con el selector dado. Por tanto, cada vez que la usas estás haciendo una búsqueda en todo el DOM para recolectar los elementos. Es muy similar a hacer una consulta a una base de datos, de hecho si en lugar de CSS query se usara SQL sería algo como:

select * from DOM where class like '%clase%'

Ahora imagina tener que hacer esa consulta 10 veces.

En cambio, si creas una variable para guardar el resultado, haces una vez la consulta. El coste de la consulta es O(N) (el DOM no está ordenado ni tiene indices, hay que rastrear todo el documento). Acceder a una posición de un array es, en cambio trivial.

De hecho, ya hay diferencias en rendimiento entre el uso de

document.querySelectorAll('.nombreDeClase') y

document.getElementsByClassName('nombreDeClase')

porque el primero tiene que interpretar el tipo de búsqueda.

1
  • Voy a editar la pregunta, porque ayer antes de tener que irme ya conseguí un resultado que me gustaba, pero en el chat ya me estaban diciendo de cosas que estaban mal. Lo pondré por si acaso.
    – AQMR
    el 8 abr. 2021 a las 6:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.