En realidad no entendí bien lo que quieres hacer ni menos si es necesario hacerlo como lo haces ahora, pero armé una respuesta que puede servir a alguien, en la forma de una lista de sugerencias.
1. No computar el botón en cada bucle
El botón siempre será el botón, nunca se reasigna. Entonces, en vez de computarlo en cada llamado, es un caso de uso para declararlo como constante afuera de la función que decide el mensaje.
const boton = document.querySelector('#interruptor')
2. Nombrar bien las cosas lo cambia todo
Como verás, mi botón se llama "interruptor" y no "int1". Cuando yo empecé a programar todas mis variables se llamaban "a" o "b" o a veces "kk", pero sólo me hacía zancadillas a mí mismo.
En la misma línea, en vez de msg2
le puse intervalKiller porque ahí queda la referencia que me permitirá parar el maldito interval.
La función message
le puse toggleInterruptor y bueno, ya me entienden. Todo con un nombre que lo hace quizás más lento de escribir pero mucho más rápido de leer.
3. Mientras más profundo un bucle, más complejo es debuggearlo
- Tu función primero tiene un
switch
- Dentro de ese switch tiene
cases
(como todo switch, claro)
- Dentro del case declaras una función
Para empezar, si tu función no está usando las variables definidas en el bucle, la puedes sacar de ahí. (mi "hello" se llama "enqueueConsoleLog"), quedando algo como:
function enqueueConsoleLog() {...}
function toggleInterruptor() {
...
// queda claro que acá se acaba la responsabilidad
// de la función en curso
return enqueueConsoleLog()
}
Si combinas una buena política para nombrar los objetos con una separación estructural de responsabilidades, se reduce la complejidad y se evitan los side effects.
Por otro lado, habiendo sólo dos resultados posibles, claramente un if
es más fácil de leer que un switch
. Aquí hay una implementación lo más limpia que pude:
function toggleInterruptor() {
if(intervalKiller) {
button.value = 'message off'
return intervalKiller = clearInterval(intervalKiller)
}
button.value = 'message on'
return intervalKiller = setInterval(enqueueConsoleLog,200)
}
Y esa implementación nos lleva al siguiente punto:
4. Minimizar los "side effects"
Puedes ver además que en cualquiera de los casos la consecuencia es predecible. El botón cambia su texto y la variable intervalKiller
toma un valor numérico (si es undefined) y toma el valor undefined si es numérico, porque clearInterval
no retorna nada. Nos ahorramos una variable.
Sin embargo, esta solución sigue siendo mala. En general si tienes una función MultiplicarPorDos
, lo sano es que te devuelva el doble del argumento. No que en el proceso cambie la resolución de pantalla, envíe un mensaje de texto y más grave, le cambie el valor a una variable que no participa de la invocación. Aunque es cómodo mantener referencias en el scope global, éstas tienen un costo cuando no sabes dónde se está cambiando qué.
5. Composición (¿Cómposabilidad?)
Pensemos que quieres usar esta función como un plugin para la comunidad, que se llama "Callen a Andrés", y puedes instanciarlo en cualquier elemento clickeable con el mensaje que tú quieras.
Con la solución actual no se puede, porque la función no toma en cuenta a quien la invocó, sino que modifica al menos dos objetos globales. Si tuvieras un botón 1 y un botón 2, no podrías usar la misma función para permitirles controlar cada uno su propio intervalo. Acá el que invoca la función no influye en el resultado de ésta.
Más importante todavía: nada te impide declarar dos intervalos en paralelo. Si usas la misma variable global como referencia para matar al intervalo, es importante no "pisarla" con otras declaraciones sin haber cancelado la que está vigente. La variable sólo sabe cómo matar al más reciente. Los que ya no hay cómo accesar ... eventualmente botan el browser (me pasó dos veces escribiendo esta respuesta).
Propuesta de solución
Me propuse conseguir una solución que no tuviera efectos secundarios (nada de variables globales) y que no modificara el contenido del botón. Lo que hace mi función es retornar el ID del handle, cuando el intervalKiller no tiene uno, o bien un string vacío cuando el intervalKiller acaba de eliminar al susodicho. Algo como:
function toggleInterruptor( intervalKiller ) {
return intervalKiller
? clearInterval(intervalKiller)
: setInterval(enqueueConsoleLog,200)
}
Tal que el botón pudiese ser dueño de asignar ese retorno
<button .... onclick="this.value=toggleInterruptor(this.value)"
Con esto se conseguiría una función pura. No hay efectos secundarios y no se modifica el botón ni sus propiedades (principio Open-Closed), pero el botón puede inyectarse a sí mismo como dependencia.
Sin embargo, pese a que esto activa y desactiva el timeInterval, no le cambia el estilo al botón. Si lo hago en la función entonces ya no es tan pura, y el día de mañana olvidaré quién está modificando mi botón. Al final, la solución fue usar un input de texto, cuyo valor se llena con el retorno de la función.
Con ese input, un label y algunos seudoselectores, el texto del botón y su color se infieren de la condición vacío o no vacíos de ese input. Para esto tuve que castear el input a número (de ida) y a string en blanco (de vuelta, cuando es undefined)
Finalmente, la función que encola mensajes a la consola acepta un par de propiedades del input como parámetro, lo hice así para que vean dos botones funcionando en paralelo.
function toggleInterruptor(input) {
return Number(input.value) ?
clearInterval(Number(input.value)) || "" :
enqueueConsoleLog([input.name, input.title]);
}
Dejo el snippet funcionando.
function enqueueConsoleLog(messages) {
return setInterval(function() {
console.log(
messages.reverse()[0]
)
}, 2000)
}
function toggleInterruptor(input) {
return Number(input.value) ?
clearInterval(Number(input.value)) || "" :
enqueueConsoleLog([input.name, input.title]);
}
.contenedor {
display: flex;
justify-content: space-evenly;
}
.input_group {
flex-wrap: nowrap;
justify-items: stretch;
}
input.interruptor {
margin: 1em;
width: 4em;
color: gray;
padding: 0.2em;
}
input.interruptor+label {
border: 0 none;
padding: 0.3em 0.05em;
margin-left: -5.5em;
margin-top: 4em;
border-radius: 6px;
border-color: #262626;
width: 7em;
}
input.interruptor+label:before {
content: 'Código ON';
background-color: #000;
border: 2px solid green;
color: #00cc00;
width: 8em;
height: 1em;
padding: 0.3em 1.07em;
font-weight: bold;
border-radius: 8px;
}
input.interruptor:placeholder-shown+label:before {
content: 'Código OFF';
color: #ff0000 !important;
border-color: red;
}
<div class="contenedor">
<div class="input_group">
<input type="text" value="" id="interruptor1" class="interruptor" placeholder=" " onclick="this.value=toggleInterruptor(this)" name="Andrés" title="my name is">
<label for="interruptor1"> Mensaje de Andrés</label>
</div>
<div class="input_group">
<input type="text" value="" id="interruptor2" class="interruptor" placeholder=" " onclick="this.value=toggleInterruptor(this)" name="Pepe" title="A mí me dicen">
<label for="interruptor2"> Mensaje de Pepe</label>
</div>
</div>