es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo configurar un bucle for con setTimeout que itere hacia atrás?

12 Jul, 2023 Programación

Puede que me esté acercando de manera completamente equivocada, ya que soy un poco novato en cuanto a javascript, pero básicamente lo que intento hacer (por diversión) es cambiar el color de una celda de una tabla al hacer clic y luego hacer que las celdas al norte, este, sur y oeste cambien de color en secuencia (piense en el efecto de la bomba en bomberman).

Hasta ahora, he logrado hacer que la dirección hacia el sur funcione utilizando el siguiente código:

function timeOutDown(i) {
  let bubbleRowPositive = col + rowArray[i];
  let bubbleRowPositiveId = document.getElementById(bubbleRowPositive);

  setTimeout(function() {
    bubbleRowPositiveId.style.backgroundColor = "#AA3333";
  },i * 50);
}

for (let i=row; i<colarray.length; i++)="" {="" timeoutdown(i);="" }="" ```="" para="" dar="" contexto,="" hay="" 15="" filas="" y="" 15="" columnas="" de="" celdas="" de="" tabla="" de="" tamaño="" uniforme,="" con="" id's="" como="" "a1"="" y="" "h14".="" sin="" embargo,="" el="" problema="" con="" el="" que="" me="" encuentro="" es="" que="" el="" inverso="" sigue="" iterando="" hacia="" arriba,="" incluso="" al="" revertir="" el="" bucle="" for="" y="" no="" puedo="" entender="" por="" qué:="" ```="" function="" timeoutup(k)="" {="" let="" bubblerownegative="col" +="" rowarray[k];="" let="" bubblerownegativeid="document.getElementById(bubbleRowNegative);" settimeout(function()="" {="" bubblerownegativeid.style.backgroundcolor="#AA3333" ;="" console.log(`index:="" ${k},="" row="" num:="" ${rowarray[k]}`);="" },k="" *="" 50);="" }="" for="" (let="" k="row-2;" k="">=0; k--) {
  timeOutUp(k);
  console.log(k);
}

Comencé usando la misma función para manejar ambos bucles for, eso no funcionó, por lo que intenté este método utilizando 2 funciones separadas.

¿Hay una manera más fácil de hacer esto?</colarray.length;>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en javascript, bucles for y setTimeout, definitivamente hay una manera más sencilla de lograr el efecto deseado de cambiar el color de las celdas en las direcciones norte, sur, este y oeste en secuencia.

    Una posible solución sería crear una función que tome una dirección como parámetro (por ejemplo, “norte”, “sur”, “este”, “oeste”), y dentro de esa función usar un bucle for para iterar sobre las celdas en la dirección especificada.

    Por ejemplo, para cambiar el color de las celdas en la dirección “norte”, podrías usar el siguiente código:

    function cambiarColor(direccion) {
  let filaInicio, columnaInicio, pasoFila, pasoColumna;

  // establece la fila y columna de inicio, así como los pasos de fila y columna según la dirección
  if (direccion === "norte") {
    filaInicio = fila - 1; //asumiendo que fila es la fila actual en la que se hizo clic
    columnaInicio = columna;
    pasoFila = -1;
    pasoColumna = 0;
  } else if (direccion === "sur") {
    filaInicio = fila + 1;
    columnaInicio = columna;
    pasoFila = 1;
    pasoColumna = 0;
  } else if (direccion === "este") {
    filaInicio = fila;
    columnaInicio = columna + 1;
    pasoFila = 0;
    pasoColumna = 1;
  } else if (direccion === "oeste") {
    filaInicio = fila;
    columnaInicio = columna - 1;
    pasoFila = 0;
    pasoColumna = -1;
  }

  // itera sobre las celdas en la dirección especificada, usando setTimeout para retrasar el cambio de color
  for (let i = 0; i < 5; i++) { // cambia 5 celdas en secuencia
    setTimeout(function() {
      let idCelda = String.fromCharCode(columnaInicio + i * pasoColumna + 65) + (filaInicio + i * pasoFila + 1);
      let celda = document.getElementById(idCelda);
      celda.style.backgroundColor = "#AA3333";
    }, i * 50);
  }
}

    Esta función toma un parámetro de dirección (“norte”, “sur”, “este” u “oeste”) y establece la fila y columna de inicio, así como los pasos de fila y columna según la dirección. Luego utiliza un bucle for para iterar sobre cinco celdas en la dirección especificada (puedes ajustar la cantidad de celdas a cambiar según sea necesario) y usa setTimeout para retrasar el cambio de color. El setTimeout permite que las celdas cambien de color en secuencia (con un retraso de 50 ms entre cada cambio), creando el efecto “bomba” que se describió.

    Para usar esta función, simplemente la llamarías con la dirección deseada como parámetro. Por ejemplo, para cambiar el color de las celdas en la dirección “norte”, llamarías:

    cambiarColor("norte"); //suponiendo que "fila" y "columna" han sido previamente definidos como la fila y columna de la celda en la que se hizo clic

    En general, este enfoque debería simplificar el código y facilitar la obtención del efecto deseado.

Comments are closed.