¿Se debe definir una función Javascript antes de llamarlo?

Question

Si me quedo por debajo de la función antes de definir, voy a conseguir este error ...

Uncaught ReferenceError: openModal is not defined 

carrera luego defina

$(document).ready(function() { 

    delay(openModal, 2000); 

    delay = function (f, t) { 
     setTimeout(function() { 
      f(); 
     }, t); 
    }; 

    openModal = function() { 
     $('#modal-box').css({ 
      left: $(window).width()/2 - $('#modal-box').width()/2, 
      top: $(window).height()/2 - $('#modal-box').height()/2 
     }); 
     $('#modal-box').show(); 
     $('#modal-mask').show(); 
    }; 

}); 

Ahora bien, si defino la función primero y luego llamarlo funciona ... Tengo experiencia en PHP, así que estoy acostumbrado a poder acceder a funciones de manera global, ¿estoy haciendo algo mal o tengo que definir todas las funciones antes de que puedan ser utilizadas?

$(document).ready(function() { 

    delay = function (f, t) { 
     setTimeout(function() { 
      f(); 
     }, t); 
    }; 

    openModal = function() { 
     $('#modal-box').css({ 
      left: $(window).width()/2 - $('#modal-box').width()/2, 
      top: $(window).height()/2 - $('#modal-box').height()/2 
     }); 
     $('#modal-box').show(); 
     $('#modal-mask').show(); 
    }; 

    delay(openModal, 2000); 

}); 

Answer 1

Al asignar una función a una variable , debe asignarlo antes de poder usar la variable para acceder a la función.

Si se declara la función con la sintaxis normal en lugar de asignar a una variable, que se define cuando se analiza el código, por lo que este funciona:

$(document).ready(function() { 

    delay(openModal, 2000); 

    function openModal() { 
     $('#modal-box').css({ 
      left: $(window).width()/2 - $('#modal-box').width()/2, 
      top: $(window).height()/2 - $('#modal-box').height()/2 
     }); 
     $('#modal-box').show(); 
     $('#modal-mask').show(); 
    }; 

}); 

(Nótese la diferencia en su alcance, sin embargo cuando usted. cree la variable openModal implícitamente con solo usarla, se creará en el ámbito global y estará disponible para todo el código. Cuando declare una función dentro de otra función, solo estará disponible dentro de esa función. Sin embargo, puede hacer que la variable local a la función también, usando var openModal = function() {.)

Answer 2

Mueva la definición de la función fuera del bloque document.ready, y todo funcionará como esperaba. En javascript (como en la mayoría de los idiomas), debe definir una función o variable antes de hacer una referencia a ella.

En su primer ejemplo, hace referencia a openModal en la llamada al delay(), pero javascript no tiene forma de saber qué es openModal.

openModal = function() { 
    $('#modal-box').css({ 
     left: $(window).width()/2 - $('#modal-box').width()/2, 
     top: $(window).height()/2 - $('#modal-box').height()/2 
    }); 
    $('#modal-box').show(); 
    $('#modal-mask').show(); 
}; 

$(document).ready(function() { 
    delay(openModal, 2000); 
}); 

edición:

TJHeuvel señala que function hace algún truco para definir las funciones antes que nada se ejecuta en el mismo bloque: Why can I use a function before it's defined in Javascript?

Answer 3

En shor t Sí usted tiene que definir antes de usar una función, pero se puede utilizar la función setTimeout para su retraso que lleva una cadena como el código para exectute:

$(document).ready(function() { 

    setTimeOut('openModal()', 2000); 

    openModal = function() { 
     $('#modal-box').css({ 
      left: $(window).width()/2 - $('#modal-box').width()/2, 
      top: $(window).height()/2 - $('#modal-box').height()/2 
     }); 
     $('#modal-box').show(); 
     $('#modal-mask').show(); 
    }; 

}); 

esto podría suponer que la función no se conoce hasta después de que se define.

Answer 4

Yo diría que SÍ. Una función siempre debe definirse antes de llamar. embargo, algunas funciones pueden ser invocadas (llamado) antes de donde han sido definidos (elevación)

dos tipos diferentes de funciones que quiero escribir sobre son:

funciones de expresiones & Funciones de desaceleración

1 - Funciones de expresión: una expresión de función se puede almacenar en una variable para que no necesiten nombres de función. También se nombrarán como función anónima (una función sin nombre).Para invocar (invocar) siempre se necesita usar un nombre de variable. Este tipo de funciones no funcionarán si las llamadas anteriores a donde se ha definido significan que el Levantamiento no está ocurriendo aquí. Siempre debemos definir primero la función de expresión y luego invocarla.

let lastName = function (family) { 
console.log("My last name is " + family); 
};   
let x = lastName("Lopez"); 

Así es como se puede escribir en la ES6:

lastName = (family) => console.log("My last name is " + family); 
x = lastName("Lopez"); 

2- Funciones de desaceleración: Las funciones se declaran con la siguiente sintaxis no se ejecutan inmediatamente. Se "guardan para un uso posterior", y se ejecutarán más adelante, cuando se invoquen (invoquen). Este tipo de funciones funcionan si las llama ANTES o DESPUÉS de donde se han definido. Si llama a una función de desaceleración antes de donde se ha definido - Elevación - funciona correctamente.

function Name(name) { 
    console.log("My cat's name is " + name); 
} 
Name("Chloe"); 

ejemplo de elevación:

Name("Chloe"); 
function Name(name) { 
    console.log("My cat's name is " + name); 
}