I have two external .js files. The first contains a function. The second calls the function.
file1.js
$(document).ready(function() {
function menuHoverStart(element, topshift, thumbchange) {
... function here ...
}
});
file2.js
$(document).ready(function() {
setTimeout(function() { menuHoverStart("#myDiv", "63px", "myIMG"); },2000);
});
The trouble is that this is not running the function. I need the two separate files because file2.js is inserted dynamically depending on certain conditions. This function works if I include the setTimeout... line at the end of file1.js
Any ideas?
The problem is, that menuHoverStart is not accessible outside of its scope (which is defined by the .ready() callback function in file #1). You need to make this function available in the global scope (or through any object that is available in the global scope):
function menuHoverStart(element, topshift, thumbchange) {
// ...
}
$(document).ready(function() {
// ...
});
If you want menuHoverStart to stay in the .ready() callback, you need to add the function to the global object manually (using a function expression):
$(document).ready(function() {
window.menuHoverStart = function (element, topshift, thumbchange) {
// ...
};
// ...
});
You have declared menuHoverStart inside a function (the anonymous one you pass to the ready ready). That limits its scope to that function and you cannot call it from outside that function.
It doesn't do anything there, so there is no need to hold off on defining it until the ready event fires, so you could just move it outside the anonymous function.
That said, globals are worth avoiding, so you might prefer to define a namespace (to reduce the risk of name collisions) and hang the function off that.
var MYNAMESPACE = {}; // In the global scope, not in a function
// The rest can go anywhere though
MYNAMESPACE.menuHoverStart = function (element, topshift, thumbchange) {
Related
Following is a sample code created based on the scenario. showData() function is defined inside a javascript load function. I wanted to call showData() from another file maybe on a button click. I know this will work if the showData is made global. It's not possible to make the function global, as in this scenario it's a dynamically generated code. Is there anyway in JS that allows to call such functions ?
// Not possible to change the structure of this file as its coming dynamically
window.addEventListener("load", function() {
showData(); // 1st time call
function showData() {
console.log('starting execution')
}
});
// Calling from another file
showData(); // 2nd time call - not possible
No.
The function is declared inside another function. Its scope is that function.
Unless you change that code to make it a global, it isn't accessible from outside the containing function at all.
If the structure of the code can't be changed, perhaps you could try attaching your function to the global window object, like:
window.addEventListener("load", function() {
// attached to window
window.showData = function() {
console.log('starting execution')
};
window.showData(); // 1st time call
});
// Calling from another file
window.showData();
But make sure the second call (from the other file) has a little bit of a delay (remember the eventListener has to be attached to the window first, before the function becomes available).
You could try:
// second call
setTimeout(function() {
window.showData();
}, 1000);
I have a file bg.js whose contents is simply an IIFE. I'd like to load this file/call the function in from another function in another file. Since the IIFE is anonymous (it is, right?) I can't call it by name. It seems I have to load the entire file so it executes immediately.
I've done searching and found many tutorials and documents about what an IIFE is, but nowhere had I seen how to execute one from another scope.
How do I call/load a javascript file that is an IIFE from another javascript file?
More Information
The IIFE is loaded in the footer of my page. When I click a link to navigate, the header and footer scripts are not executed. The IIFE in the footer is responsible for setting the background image, so I need to get that function to execute in my perPageBindings()
What I think I need to do is invoke the IIFE from another function in the body which is being executed in perPageBindings()
Edit for clarity
There are two options I am considering:
Simply move the script tag to the body from the footer; or
Give the IIFE a name so it is no longer anonymous and then call that named function from elsewhere
If 2 is a viable option then I think I will create a new question about converting and IIFE to a named function.
If you want to access something within that script, a function or a property, after it has been anonymously invoked, you'll need to expose some of the internals of that function to something that is accessible from global scope.
I'm not saying that you must have your function put a variable into global scope, although that is what many libraries do and is one of the paths that UMD follows if a CommonJS or AMD environment is not available.
You should look into the Revealing Module Pattern for a better perspective.
Consider the following code snippet:
(function(global){
/*
* This variable will stay "private"
* because it is scoped to the IIF
*/
var someProp = "Hello World";
/*
* This property is effectively exposed
* because it is accessible through
* myLib.foxtrot below
*/
var someOtherProp = "Hello to you too";
var myLib = {
foo: "bar",
fiz: true,
buzz: 1,
foxtrot: someOtherProp
};
/*
* myLib is now accessible through the
* global that we passed to the IIF below
* at the point of calling with "window"
*/
global.myLib = myLib;
}(window));
Seems like you want to define this function some where that makes it reusable. If you want to invoke from the footer wrap the reusable function call in an IIFE. That way its immediately invoked in the footer and calls your function but you can also call this function elsewhere.
Example:
JS:
function setBackground () {
// sets background and can be called whenever
}
HTML:
<footer>
<script>
(function () {
setBackground();
} ());
<script>
</footer>
There is no need to import the global to an IIFE
instead of coding
(function(global){
//...
global.myLib = myLib;
}(window));
you can code directly
{
window.myLib = {
//...
};
}
I add IIFE always to a namespace, so it's easy referable.
var app = {};
{
app.myLibrary = {
log: (str) => window.console.log(str),
};
// is executed immediately
window.console.log(`myLibrary = ${app.myLibrary}`);
}
{
app.external = {
call: (str) => app.myLibrary.log(str),
};
// is executed immediately
window.console.log(`external = ${app.external}`);
}
// is easy referable
app.external.call('Hello World!');
I am studying a JavaScript file and saw in it that some of the methods are wrapped inside a jQuery function. Can Anyone help me how to invoke the following method? And may I know what is the advantage or why the method is wrapped in a function? Below is my sample JavaScript code.
JQuery/JavaScript
$(document).ready(function () {
//How to invoke "testMethod" method?
$(function () {
function testMethod() {
alert("this is a test method");
}
});
});
As you've declared it, testMethod() is a local function and is only available inside the function scope in which it is declared. If you want it to be callable outside that scope, you will need to define it differently so that it is available at a broader scope.
One way of doing that is to make it a global function:
$(document).ready(function () {
//How to invoke "testMethod" method?
$(function () {
window.testMethod = function() {
alert("this is a test method");
}
});
});
testMethod(); // available globally now
It could also be attached to a global namespace or it could be defined at a higher scope where it would also solve your problem. Without specifics on your situation, we can't suggest which one would be best, but the main thing you need to do is to change how the function is declared so it is available in the scope in which you want to call it from.
P.S. Why do you have one document ready function nested inside another? That provides no extra functionality and adds unnecessary complexity. Also, there's really no reason to define testMethod() inside your document ready handlers if you want it available globally.
Before anything else:
$(document).ready(function(){...});
//is the same as
$(function(){...}}
As for your question, here's are potential ways to do it:
If that function is some utility function that everyone uses, then have it available to all in some namespace, like in this one called Utility:
//Utility module
(function(ns){
//declaring someFunction in the Utility namespace
//it's available outside the ready handler, but lives in a namespace
ns.someFunction = function(){...}
}(this.Utility = this.Utility || {}));
$(function(){
//here in the ready handler, we use it
Utility.someFunction();
});
If they all live in the ready handler, and want it to be used by all code in the handler, have it declared in the outermost in the handler so all nested scopes see it.
$(function(){
//declare it in the outermost in the ready handler
function someFunction(){...}
//so we can use it even in the deepest nesting
function nestedSomeFunction(){
someFunction();
}
someElement.on('click',function(){
$.get('example.com',function(){
someFunction();
});
});
nestedSomeFunction();
someFunction();
});
Your call needs to be within the $(function.
It's all about scope and you need to break the testMethod out of the $(function.
Can you perhaps further explain your requirement so that we can maybe help a little better?
Into ready event:
$(document).ready(function () {
//How to invoke "testMethod" method?
var testMethod = function () {
alert("this is a test method");
}
// V0.1
testMethod();
// V0.2
$('#some_id').click(testMethod);
});
In other part:
myObj = {testMethod: null};
$(document).ready(function () {
//How to invoke "testMethod" method?
myObj.testMethod = function () {
alert("this is a test method");
}
});
// Something else
if( myObj.testMethod ) myObj.testMethod();
*Is there a way to call a function defined inside another function in javaSCRIPT? For example:
window.onload() = function() {
function my_function(){
print("Blah");
};
};
function function_two(){
my_function();
};
Is there a way to do something like the above (calling my_function in function_two even though it's defined inside the window.onload() function)? In my actual code, which also uses the raphael.js library, I'm trying to write a button in HTML, which using the onClick function, calls a function(like function_two) that runs the function defined in window.onload() (like my_function). However the console says that the my_function is undefined.
The scope of the function is the core issue here, as Zeychin and Trevor have said. I thought I'd offer another way of handling it. Basically, you can set your function to a variable that's in a higher scope (that is, accessible to both the onload and function_two functions), while defining it inside the onload function as you originally have:
var myFunction; //This is the placeholder which sets the scope
window.onload() = function() {
myFunction = function() { //Assign the function to the myFunction variable
print('blah');
}
}
function function_two() {
myFunction();
}
This might be handy if you only know the information you need for myFunction once you're in the onload event.
You can not do what you are asking to do.
The function my_function()'s scope is only within the anonymous function, function(). It falls out of scope when the method is not executing, so this is not possible.
Trevor's answer is the way to do this.
window.onload = function() {
my_function()
};
function my_function(){
alert("Blah");
};
function function_two(){
my_function();
};
Simplified Example:
// path/to/js/panel.js
$(function(){
var hidePanel = function(){
//hides the panel div
};
});
// path/to/js/another-script.js
$(function(){
hidePanel(); //out of scope MEGA-FAIL
});
As we speak, i have some functions/variables copy-pasted in 2 different files.
I was curious whether RequireJS would solve this problem...
Your function itself just needs to be declared after jQuery is loaded if it needs jQuery, but it need not be declared on document.ready, just executed then. The simplest way to do what you're after is:
// path/to/js/panel.js
function hidePanel() {
//hides the panel div
}
// path/to/js/another-script.js
$(hidePanel);
This just passes your function to $(), which schedules it run on document.ready, or immediately if the document is already ready.
// path/to/js/panel.js
$(function(){
var hidePanel = function(){
//hides the panel div
};
});
With this code you create an an anonymous function. Anonymous functions don't pollute the global namespace. All variables (in this case hidePanel) declared in an anonymous function are not visible outside of the anonymous function.
Because of that the function is not available.
So you need to do a global function.
You can make that in different ways:
var hidePanel = function() {
});
function hidePanel() {
}
P.S: I recommend that you learn the OO-Pattern for javascript :-)
Javascript Object-Oriented Programming | Part 1