Appel d'une fonction javascript à partir d'un autre fichier .js

Question

J'ai deux fichiers .js externes. Le premier contient une fonction. Le second appelle la fonction.

file1.js

$(document).ready(function() { 

    function menuHoverStart(element, topshift, thumbchange) { 

     ... function here ... 

    } 

}); 

file2.js

$(document).ready(function() { 

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

}); 

Le problème est que cela ne fonctionne pas la fonction. J'ai besoin des deux fichiers séparés car file2.js est inséré dynamiquement en fonction de certaines conditions. Cette fonction fonctionne si j'inclue la ligne setTimeout ... à la fin de file1.js

Des idées?

Answer 1

Le problème est que menuHoverStart n'est pas accessible en dehors de sa portée (qui est définie par la fonction de rappel .ready() dans le fichier # 1). Vous devez activer cette fonction dans la portée globale (ou par tout objet qui est disponible dans le cadre global):

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

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

Si vous voulez menuHoverStart rester dans le rappel .ready(), vous devez ajouter la fonction à l'objet global manuellement (en utilisant une expression de fonction):

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

Answer 2

vous avez déclaré menuHoverStart dans une fonction (une anonyme vous passez au prêt prêt). Cela limite sa portée à cette fonction et vous ne pouvez pas l'appeler depuis l'extérieur de cette fonction. Quoi que ce soit, il n'est donc pas nécessaire d'attendre pour le définir avant que l'événement ready ne se déclenche, vous pouvez donc simplement le déplacer en dehors de la fonction anonyme. Cela dit, les variables globales valent la peine d'être évitées, donc vous préférerez peut-être définir un espace de noms (pour réduire le risque de collisions de noms) et suspendre la fonction.

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