Tengo una función A para seleccionar el elemento .current y hacerle algo. Luego, (re)mueva el nombre de la clase .current a otro elemento y haga lo mismo con él.
function funA () { let state = []; let currentRow = document.querySelector(".current"); //... evaluateThings(function () { currentRow.classList.remove("current"); currentRow.nextSibling.classList.add("current"); funcA(); }); } function evaluateThings(callback) { //... callback() } funcA() El problema es que funcA recuerda el selector anterior y realiza cambios tanto en el nuevo .current como en el último.
funcA agrega un oyente keydown al documento. Cuando llama recursivamente a funcA , no está eliminando el oyente anterior, por lo que en el próximo evento, ambos se ejecutan y ambos elementos se modifican, y el ciclo continúa.
Elimine el oyente anterior al realizar la llamada recursiva.
function funcA() { const currentRow = document.querySelector(".current"); const handler = (e) => { if (e.key === 'Enter') { currentRow.nextElementSibling.classList.add("current"); currentRow.classList.remove("current"); document.removeEventListener("keydown", handler); evaluateThings(funcA); } else { currentRow.innerHTML += e.key } }; document.addEventListener("keydown", handler); } function evaluateThings(callback) { //... callback() } funcA() <div class="row current">a</div> <div class="row">b</div> <div class="row">c</div> <div class="row">d</div> <div class="row">e</div> <div class="row"></div>O mantenga el oyente adjunto, pero reasigne la variable que apunta al elemento.
let currentRow = document.querySelector(".current"); function funcA() { document.addEventListener("keydown", (e) => { if (e.key === 'Enter') { currentRow.nextElementSibling.classList.add("current"); currentRow.classList.remove("current"); evaluateThings(() => currentRow = document.querySelector(".current")); } else { currentRow.innerHTML += e.key; } }); } function evaluateThings(callback) { //... callback() } funcA() <div class="row current">a</div> <div class="row">b</div> <div class="row">c</div> <div class="row">d</div> <div class="row">e</div> <div class="row"></div>