Puede que me esté acercando a esto de manera completamente incorrecta, ya que soy un poco novato en lo que respecta a javascript, pero esencialmente lo que estoy tratando de hacer (por un poco de diversión) es tener una celda de una tabla cambie el color al hacer clic, luego haga que las celdas al norte, este, sur y oeste cambien a un color diferente en secuencia (piense en el efecto bomba en bomberman).
Hasta ahora, he logrado que la dirección sur funcione usando 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 el contexto, hay 15 filas y 15 columnas de celdas de tabla de tamaño uniforme, con ID como "a1" y "h14".
Sin embargo, el problema con el que me encuentro es que el inverso seguirá iterando hacia arriba , incluso al invertir el ciclo 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ó, así que intenté este método usando 2 funciones separadas.
¿Hay una manera más fácil de hacer esto?
A pesar de que su ciclo for se invirtió, aún pasa en el mismo índice para cada iteración, y ese índice se usa para calcular la demora que recibe. Entonces, pase lo que pase, el elemento en el índice 0 tiene un retraso de 0*50 milisegundos, independientemente de si sucede primero o último. Todavía necesita su contador original para definir su índice ordenado. Podrías resolverlo así:
function timeOutUp(k, i) { let bubbleRowNegative = col + rowArray[k]; let bubbleRowNegativeId = document.getElementById(bubbleRowNegative); setTimeout(function() { bubbleRowNegativeId.style.backgroundColor = "#AA3333"; console.log(`Index: ${k}, Row Num: ${rowArray[k]}`); },i * 50); } for (let k=row-2, i = 0; k>=0; k--, i++ ) { timeOutUp(k, i); console.log(k, i); } Acabo de agregar 1 variable: vuelvo a i , eso cuenta. Se pasa a timeOutUp para calcular el retraso real en el orden previsto.