JavaScript es un lenguaje poderoso que nos permite crear sitios web interactivos. A veces, necesitamos ejecutar una función específica solo una vez, sin importar cuántas veces se llame. Hay varias formas de lograr esto en el desarrollo web.
Usando una variable de bandera (flag)
Una forma sencilla es utilizar una variable como "bandera" (flag). Esta variable nos indica si la función ya se ha ejecutado. Inicialmente, la bandera está en un estado (por ejemplo, 'false'). Dentro de la función, verificamos el estado de la bandera. Si es 'false', ejecutamos el código y cambiamos la bandera a 'true'. En llamadas posteriores, la verificación fallará y la función no se ejecutará de nuevo.
Veamos un ejemplo:
Must Read
let funcionEjecutada = false;
function ejecutarUnaVez() {
if (!funcionEjecutada) {
console.log("¡Esta función se ejecuta solo una vez!");
funcionEjecutada = true;
} else {
console.log("La función ya fue ejecutada.");
}
}
ejecutarUnaVez(); // Imprime "¡Esta función se ejecuta solo una vez!"
ejecutarUnaVez(); // Imprime "La función ya fue ejecutada."
En este código, la variable funcionEjecutada actúa como la bandera. La primera vez que llamamos a ejecutarUnaVez(), la condición !funcionEjecutada es verdadera, por lo que el código dentro del if se ejecuta y funcionEjecutada se establece en true. Las llamadas posteriores no harán nada.
Usando la propiedad once de un evento
En algunos casos, podemos utilizar la propiedad once asociada a los eventos. Esta propiedad, cuando está presente, asegura que un evento se gestione una sola vez.
Consideremos este ejemplo que usa el DOM para adjuntar un listener:
const boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
console.log('¡Click detectado!');
boton.removeEventListener('click', arguments.callee); // Eliminar el listener después de la primera ejecución
});
Cada vez que se hace clic en el botón, el mensaje se imprimirá una vez. Para la segunda vez el listener se ha eliminado.
Una mejor forma de adjuntar el listener para ejecutarse una vez es usar el siguiente código:
const boton = document.getElementById('miBoton');
boton.addEventListener('click', () => {
console.log('¡Click detectado!');
}, { once: true });
La opción { once: true } le dice al navegador que ejecute el listener solo una vez.
Usando clausuras (closures)
Las clausuras en JavaScript son una forma poderosa de mantener el estado privado. Podemos crear una función que devuelve otra función. La función interna "recuerda" las variables del ámbito externo, incluso después de que la función externa haya terminado de ejecutarse. Podemos usar esto para ejecutar una función solo una vez.
Aquí hay un ejemplo:
function crearFuncionUnica() {
let ejecutado = false;
return function() {
if (!ejecutado) {
console.log("¡Función ejecutada una sola vez!");
ejecutado = true;
} else {
console.log("La función ya se ejecutó.");
}
};
}
const miFuncionUnica = crearFuncionUnica();
miFuncionUnica(); // Imprime "¡Función ejecutada una sola vez!"
miFuncionUnica(); // Imprime "La función ya se ejecutó."
En este caso, crearFuncionUnica() retorna una función. La variable ejecutado está dentro del ámbito de crearFuncionUnica(), pero la función interna puede acceder a ella. Esto nos permite mantener el estado de "ejecutado" de forma privada.
Aplicaciones prácticas
Ejecutar una función solo una vez tiene muchas aplicaciones. Por ejemplo, puede usarse para inicializar un componente, cargar datos una sola vez o mostrar un mensaje de bienvenida al usuario la primera vez que visita un sitio web. También puede ser útil al trabajar con APIs donde solo queremos hacer una llamada inicial.
La elección del método dependerá del contexto específico de tu código. El uso de una variable bandera es simple y fácil de entender. Las clausuras ofrecen una forma más encapsulada de mantener el estado. La propiedad once es especialmente útil para manejar eventos.
