Tengo el siguiente código
function setSize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.addEventListener('resize', setSize) } Como puede ver, el detector de eventos de cambio de resize llama recursivamente a setSize() . Hice esto para poder manejar la configuración del tamaño inicial y el cambio de tamaño de la ventana en la misma función.
El problema es que cada repetición agregará un eventListener adicional, en lugar de reemplazar el último. Por lo tanto, necesito eliminar el detector de eventos de cambio de resize en cada repetición para evitar que se acumulen y, finalmente, tener docenas de detectores de eventos que se activen al cambiar el tamaño de la ventana.
La documentación dice que removeEventListener() debe tomar un parámetro de event que defina la condición sobre la cual se activará. No quiero esto, ya que quiero que se active en el momento en que se lee el código al comienzo de la función. Al igual que
function setSize() { document.removeEventListener(setSize) // I want something like this canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.addEventListener('resize', setSize) }¿Hay alguna manera de hacer esto, o algún método alternativo que me recomiendes?
Editar: la motivación detrás de mi pregunta es que me gustaría una solución elegante de una sola función que maneje tanto la configuración inicial como los cambios de tamaño posteriores de la ventana, en lugar de tener que definir setSize(), llamarlo y luego crear un detector de eventos que también lo llame.
function setSize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } // I do not want to have to do this: setSize() document.addEventListener('resize', setSize) // I want something more elegant that handles both initial setup and window resize. Rápidamente me di cuenta después de publicar esta pregunta que la razón por la que debo especificar el event en removeEventListener() es porque ese es el evento específico que setSize() está obligado a activar. Pensé que estaba diciendo que eliminaría el detector de eventos solo cuando se activa el evento, en lugar de eliminar inmediatamente el detector de eventos, que es lo que quiero.
Puede hacer lo que quiera, pero no le permite eliminar el oyente en el controlador. Un pequeño ejemplo sería así:
function setSize () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; return setSize; } document.addEventListener('resize', setSize()); De esta manera, puede llamar a setSize para la inicialización mientras adjunta el evento. La función se devuelve a sí misma para que haya una referencia para addEventListener después de llamar a setSize . Más tarde, cuando se activa el evento, se ignora el valor devuelto, porque se llamará al controlador desde la cola de eventos.
O bien, puede usar un IIFE para inicializar el lienzo.
const setSize = (function setSize () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; return setSize; }()); document.addEventListener('resize', setSize); Pero, al final del día, no deberías hacer tales trucos, como ha dicho Kaiido en los comentarios, " Un código elegante es un código que es obvio ". Simplemente llame a la función para la inicialización. Eliminar la declaración de return inútil del controlador de cambio de resize le ahorrará uno o dos microsegundos para la actualización del lienzo.