Making JS local function globally accessible
Solution 1
You can make your function globally accessible and still keep reference to variables in the scope in which it was created. Simply create and assign it in window scope - e.g. instead of defining it as:
function autoSave() {
// ... code ...
}
declare it as:
window.autoSave = function() {
// .... code ....
}
you will now be able to call it anywhere (provided the initStage method has been called to declare it first, of course).
Solution 2
You can assign the autoSave function to the this object, i.e.
function initStage() {
... Some Code ...
this.autoSave = function(){
... Some Code ...
}
return this;
}
Now you can call
initStage().autoSave();
tarka
Updated on June 12, 2022Comments
-
tarka almost 2 years
I have a function inside a function that I need to access directly.
//############################################################# //# Global vars //############################################################# var canvasWidth = 585; var canvasHeight = 780; //############################################################# //# Init the canvas //############################################################# window.onload = function() { initStage(); }; //############################################################# //# Init the main stage //############################################################# function initStage() { //************************************************************* //* Create a stage to work with //************************************************************* var stage = new Kinetic.Stage({ container: "container", width: canvasWidth, height: canvasHeight }); var layerOne = new Kinetic.Layer(); var imageObj = new Image(); //************************************************************* //* Load the image into a layer on the stage //************************************************************* ... Some Code ... //************************************************************* //* Set the hidden field value to the canvas dataURL //************************************************************* function autoSave(){ stage.toDataURL({ callback: function(dataUrl){ document.getElementById("mapping-form:hiddenDataURL").value = dataUrl; console.log("Auto Save excecuted"); }, mimeType: 'image/jpeg', quality: 1.0 }); } //************************************************************* //* Function called to add text to the stage //************************************************************* ... Some Code ... layerTwo.add(txt); stage.add(layerTwo); }); }
I'm trying to access autoSave() (that in return requires the stage var from the parent function). I understand why I can't access it, but Im struggling to see how I can alter the code to make it accessible.
My first thought was simply to declare a 'higher scoped' var and assign the function to it. The problem is (as far as I can see) that this doesn't actually allow me to execute the autoSave() at the requested time.
Apologies for the 'basic natur of this question, I'm new to JS and I think this is going to be fundamental!