Llamar a una función javascript desde otro archivo .js

Question

Tengo dos archivos .js externos. El primero contiene una función. El segundo llama a la función.

file1.js

$(document).ready(function() { 

    function menuHoverStart(element, topshift, thumbchange) { 

     ... function here ... 

    } 

}); 

file2.js

$(document).ready(function() { 

    setTimeout(function() { menuHoverStart("#myDiv", "63px", "myIMG"); },2000); 

}); 

El problema es que esto no se está ejecutando la función. Necesito los dos archivos separados porque file2.js se inserta dinámicamente dependiendo de ciertas condiciones. Esta función funciona si incluyo la línea setTimeout ... al final de file1.js

¿Alguna idea?

Answer 1

El problema es que menuHoverStart no es accesible fuera de su alcance (que se define mediante la función de devolución de llamada .ready() en el archivo n. ° 1). Es necesario hacer esta función disponible en el ámbito global (o por medio de cualquier objeto que está disponible en el ámbito global):

function menuHoverStart(element, topshift, thumbchange) { 
    // ... 
} 

$(document).ready(function() { 
    // ... 
}); 

Si desea menuHoverStart permanecer en el .ready() de devolución de llamada, es necesario agregar la función de el objeto global manualmente (usando una expresión de función):

$(document).ready(function() { 
    window.menuHoverStart = function (element, topshift, thumbchange) { 
     // ... 
    }; 
    // ... 
}); 

Answer 2

usted ha declarado menuHoverStart dentro de una función (el anónimo se pasa a la lista listo). Eso limita su alcance a esa función y no puede llamar desde fuera de esa función.

No contiene nada allí, por lo que no hay necesidad de detener la definición hasta que el evento listo se dispare, por lo que podría simplemente moverlo fuera de la función anónima.

Dicho esto, los valores globales valen la pena evitar, por lo que es posible que prefiera definir un espacio de nombres (para reducir el riesgo de colisiones de nombres) y suspender la función de eso.

var MYNAMESPACE = {}; // In the global scope, not in a function 
// The rest can go anywhere though 
MYNAMESPACE.menuHoverStart = function (element, topshift, thumbchange) {