1

Tengo el siguiente código:

(function resize(){
    console.log("Ayuda!!")
})();

window.onresize = function(){ resize() }

El mensaje que se muestra en el console.log es solo de ejemlo, evidentemente tengo algo más complejo que eso, el caso es que cuando intento llamar a esa función cuando se redimensione la pantalla me devuelve el siguiente error:

Uncaught ReferenceError: resize is not defined

he intentado también esto:

window.onresize = resize()

Pero tampoco funciona, agradezco sus comentarios y respuestas.

3 respuestas 3

1

El problema es el scope, pues la función resize() está dentro de los paréntesis y añadir () al final, lo que haces es invocarla

(function resize(){
    console.log("Ayuda!!")
})();

Si le quitas () e intentas acceder a la función fuera de los paréntesis, aún así no funcionará

(function resize(){
    console.log("Ayuda!!")
});

resize();

Pues el scope de la función es únicamente dentro de los paréntesis, normalmente se usan funciones como la que has estructurado para definir funciones anónimas

(() => {
  console.log("función anónima");
})();


Lo que puedes hacer es algo así

var resize = (() => {
    console.log("Ayuda!!")
});

window.addEventListener("resize", resize);

0

Las IIFE tienen la característica de ejecutarse en el mismo momento de ser declaradas y no se guardan en ningún scope que las contenga (crean su propio scope). En este caso estás declarando la función, ejecutándola al momento y al llamar a la función onresize se consulta el scope de window pero ahí no se ha hecho ninguna asignación de la función resize por lo que te da ese error de que no se ha definido.

Aquí tienes más información sobra las IIFE

(function () {
    statements
})();

The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope

La primera primera parte de la IIFE (la que está entre paréntesis) tiene su propio lexical scope. Esto previene el acceso a variables internas de la IIFE además de evitar contaminar el global scope

Si no la conocer, te recomiendo la genial serie de libros "You don't know Js yet" de Kyle Simpson (enlace) en la que explica con muchísima profundidad el funcionamiento de los scopes, las closures y demás conceptos relacionados.

1
  • ¿Podrías traducir la cita en español?
    – padaleiana
    el 19 feb. 2021 a las 19:37
0

Se puede registrar una función anónima en el evento onresize del global scope window, dentro del scope de la función IIFE:

//IIFE
( window.onresize = function(){ console.log("Ayuda!!") })()

De esta forma, cada que suceda el evento se tendrá esa función anónima en la lista de tareas, lista para ser ejecutada.

Aquí un demo, aplíca un resize a tu explorador para ver la consola:

( window.onresize = function(){ console.log("Ayuda!!") })()

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.