I found this JS code structure and I' wondering how to call the function move() from inside the function load:
JS
function Start(data) {
this.move= function() {
....
};
function load(){
// call move
}
}
function Start(data) {
var _this = this;
this.move = function() {
console.log('mode');
}
function load() {
_this.move();
}
// load();
}
Start();
new Start();
function Start(data) {
this.move = function() {
....
};
function load(obj) {
obj.move();
}
load(this);
}
This is a javascript closure. I've found this site to be helpful.
var move = function () {
alert("move");
};
load();
function load() {
move();
}
This code will alert Move only once.
The function Start() has to be instantiated as an object. So you would use:
function Start(data) {
this.move = function() {
....
};
this.load = function(){
// call move
this.move();
}
}
var s = new Start(foobar);
s.load();
By using closures, that can be acheived by stroing the parent reference;
function Start(data) {
var me = this;
this.move= function() {
....
};
function load(){
me.move();// call move
}
}
Good Luck.
Related
I have two prototypes in my jquery script :
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
//script1.initScript.saveGrid ?
};
I'd like to call saveGrid in otherFunction. How can I do that?
Edit :
And there ?
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
$('button').on("click", function(){
//call savegrid here
});
};
Thanks.
You can access the function over this, like you already did in you example while creating the function saveGrid.
You should instead ask yourself, if this is a good idea, to create a function in another function and re-use them elsewere. What will happen, if you call otherFunction before initScript?
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
this.saveGrid();
};
var s = new script1();
s.initScript();
s.otherFunction();
For you second example you have to store this before creating your event listener.
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
var that = this;
$('button').on("click", function(){
that.saveGrid();
});
};
var s = new script1();
s.initScript();
s.otherFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>
Prototype It depends on the type .
the correct way is defined as a prototype , so you can call them in different situations
script1.prototype.saveGrid=function () {
alert("here");
}
script1.prototype.initScript = function() {
//first one
this.saveGrid()
};
script1.prototype.otherFunction = function () {
//second
//this.saveGrid()
};`
or you can define an object which then associates the prototypes
var script1=(function () {
function initScript(){
this.saveGrid();
}
function otherFunction(){
this.saveGrid();
}
script1.prototype.saveGrid=function () {
alert("here");
}
});
This is page's code.
I can't modify this.
var Example = {};
Example.create = function() {
var obj = new Example.object();
return obj;
}
Example.object = function(){
this.initialize = initialize;
function initialize() {
window.addEventListener('load', activate);
}
function activate() {
document.addEventListener('keypress', keyPressed);
}
function keyPressed(e) {
alert("Hello!");
}
};
Example.defaultObject = Example.create();
Example.defaultObject.initialize();
I have tried many things...
document.onkeypress = null;
document.keypress = null;
document.removeEventListener('keypress');
$(document).unbind('keypress');
$(document).off("keypress");
$("*").unbind('keypress');
$(document).bind('keypress', function(e) { e.stopPropagation(); });
but all failed.
How can I unbind event of document keypress?
You have to pass the listener to remove it: (a variable pointing the function aka the function name)
document.removeEventListener('keypress', keyPressed);
https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener
You will have to save it somewhere to remove it later
Root cause of the issue is removeEventListener method. This method expect second parameter which is listener method
document.removeEventListener('keypress', Example.defaultObject.keyPressed);
Here you go for Solution on your problem.
var Example = {};
Example.create = function() {
var obj = new Example.object();
return obj;
}
Example.object = function(){
this.initialize = initialize;
function initialize() {
window.addEventListener('load', activate);
document.getElementById('disable').addEventListener('click', deActivate);
}
function activate() {
document.addEventListener('keypress', keyPressed);
}
function deActivate() {
document.removeEventListener('keypress', keyPressed);
document.querySelector('h1').innerHTML = 'Page Key Press Listener Removed';
}
function keyPressed(e) {
alert("Hello!");
}
};
Example.defaultObject = Example.create();
Example.defaultObject.initialize();
<body>
<h1>Page has Key Press Listener</h1>
<input id="disable" type="button" value="deactivate">
</body>
I want to turn off the onclick till the function that was called by the onclick is done. How can I do that? But I don't want to turn off the onclick forever
function move() {
//do things...
$("#carr").off("click");
}
dado.onclick = move;
While you can add and remove eventListeners, it might be a better idea to add a guard for the function invocation, e.g.
var isRunning = false;
function myFunction(e, cb) {
// do stuff
return cb();
}
function guard(functionToRun, e) {
if (isRunning) {
return;
}
isRunning = true;
functionToRun(e, function() {
isRunning = false;
});
}
$someNode.on('click', guard.bind(this, myFunction));
You are on the right track. Use JQuery's bind and unbind functions:
function move() {
$("#carr").unbind("click");
//do stuff
$("#carr").bind("click", function () {
move();
});
}
$(document).ready(function () {
move();
});
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}
In the snippet below, the IIFE init() does not invoke. I can post any other code if needed.
This is for a drop down menu. I'm testing out $Frame.Support() so I'm pretty sure this has something to do with it, or more so the way I changed the code structure so that it is now an argument in a method.
$Frame.Support({
name: 'Menu',
body: function () {
var top_element = $A("#hold_name")[0],
bottom_element = $A("#wrap_bottom")[0],
time_out_id = 0,
TIME_DELAY = 1000;
function top_mouse_over() {
window.clearTimeout(time_out_id);
bottom_element.style.visibility = 'visible';
}
function bottom_mouse_over() {
window.clearTimeout(time_out_id);
}
function mouse_out() {
time_out_id = window.setTimeout(function () {
bottom_element.style.visibility = 'hidden';
}, TIME_DELAY);
}
(function init() {
alert('I can\'t see me.');
top_element.addEventListener("mouseover", top_mouse_over, false);
top_element.addEventListener("mouseout", mouse_out, false);
bottom_element.addEventListener("mouseover", bottom_mouse_over, false);
bottom_element.addEventListener("mouseout", mouse_out, false);
}());
}
});